Skip to content

Instantly share code, notes, and snippets.

@khripunovpp

khripunovpp/jquery form validator for bootstrap 3

Last active February 27, 2017 17:24
Show Gist options
  • Save khripunovpp/5ea6103b0b1486304dde84ea330fb5ea to your computer and use it in GitHub Desktop.
Save khripunovpp/5ea6103b0b1486304dde84ea330fb5ea to your computer and use it in GitHub Desktop.
Download ZIP
jquery form validator for bootstrap 3
Raw
jquery form validator for bootstrap 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.has-success + input {
border-color: green !important; /* Стили для input при успешной валидации*/
}
.has-success::after {
font: normal normal normal 14px/1 FontAwesome; /* Использование вместе с FontAwesome */
content:"\f00c";
color: green;
}
input[type="checkbox"] + label {
font-weight: 300;
display: inline;
}
input[type="checkbox"] + .has-success::after {
content: "";
}
</style>
<script src="https://use.fontawesome.com/e75c3e51ca.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Адаптивная под Bootstrap 3 валидация формы jQuery Form-Validator</h1>
<form action="" id="form1">
<div class="form-group">
<label for="form1-email" class="control-label">E-mail</label>
<span id="form1-email-error-dialog"></span>
<input id="form1-email" type="email" name="email" class="form-control"
data-validation="email required"
data-validation-error-msg="Указан неверный E-mail"
data-validation-error-msg-container="#form1-email-error-dialog"
aria-describedby="form1-email-help">
<span id="form1-email-help" class="help-block">Например, <i>[email protected]</i></span>
</div>
<div class="form-group">
<label for="form1-username" class="control-label">Логин</label>
<span id="form1-username-error-dialog"></span>
<input id="form1-username" name="user" class="form-control"
data-validation="length alphanumeric required"
data-validation-length="3-12"
data-validation-error-msg="Имя должно содержать только буквы и длинной от 3 до 12 символов"
data-validation-error-msg-container="#form1-username-error-dialog"
aria-describedby="form1-username-help" >
<span id="form1-username-help" class="help-block">Только буквы и от 3 до 12 символов</span>
</div>
<div class="form-group">
<label for="form1-pass" class="control-label">Пароль</label>
<span id="form1-pass-error-dialog"></span>
<!-- Первое поле для проверки должно иметь имя с суффиксом "_confirmation", а второе такое же имя только без суффикса-->
<input id="form1-pass" name="pass_confirmation" type="password" class="form-control"
data-validation="strength"
data-validation-strength="2"
data-validation-error-msg="Пароль должен содержать только буквы и длинной не менее 2 символов"
data-validation-error-msg-container="#form1-pass-error-dialog"
aria-describedby="form1-pass-help">
<span id="form1-pass-help" class="help-block">Только буквы и длинной не менее 2 символов</span>
</div>
<div class="form-group">
<label for="form1-passRep" class="control-label">Подтверждение пароля</label>
<span id="form1-passRep-error-dialog"></span>
<input id="form1-passRep" name="pass" type="password" class="form-control"
data-validation="confirmation"
data-validation-error-msg="Пароли не совпадают"
data-validation-error-msg-container="#form1-passRep-error-dialog"
aria-describedby="form1-passRep-help">
</div>
<div class="form-group">
<label for="form1-date" class="control-label">Birth date</label>
<span id="form1-date-error-dialog"></span>
<input id="form1-date" name="birth" type="date" class="form-control"
data-validation="birthdate required"
data-validation-error-msg="Дата введена некорректно"
data-validation-error-msg-container="#form1-date-error-dialog"
aria-describedby="form1-date-help">
<span id="form1-date-help" class="help-block">В формате дд.мм.гггг</span>
</div>
<div class="form-group">
<label for="form1-file" class="control-label">Выбор изображения</label>
<span id="form1-file-error-dialog"></span>
<input id="form1-file" name="image" type="file" class="form-control"
data-validation="mime size required"
data-validation-allowing="jpg, png"
data-validation-max-size="300kb"
data-validation-error-msg-required="Файл не выбран"
data-validation-error-msg-size="Размер файла привысил допустимые 300кб"
data-validation-error-msg-mime="Запрещеный тип файла"
data-validation-error-msg-container="#form1-file-error-dialog"
aria-describedby="form1-file-help">
<span id="form1-file-help" class="help-block">Допускаются файлы JPG и PNG, размером не более 300кб</span>
</div>
<div class="form-group">
<label for="form1-text" class="control-label">Текст сообщения (<span id="form1-text-max-length">100</span> символов осталось)</label>
<span id="form1-text-error-dialog"></span>
<textarea id="form1-text" name="presentation" class="form-control"
data-sanitize="escape"
aria-describedby="form1-text-help"></textarea>
<span id="form1-text-help" class="help-block">Символы: < > & ' " автоматичски кодируются</span>
</div>
<div class="form-group">
<span id="form1-checkbox-error-dialog"></span>
<input id="form1-checkbox" type="checkbox"
data-validation="required"
data-validation-error-msg="Вы должны согласится с условиями">
<label for="form1-checkbox">Я согласен с политикой конфиденциальности <a href="№" target="_blank">terms of service</a></label>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Отправить">
<input type="reset" class="btn" value="Сброс">
</div>
</form>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
$.validate({
modules : 'location, date, security, file, sanitize',
onModulesLoaded : function() {
$('#country').suggestCountry();
var optionalConfig = {
fontSize: '14px',
padding: '0 4px',
bad : 'Очень ненадежный',
weak : 'Ненадежный',
good : 'Хороший',
strong : 'Очень надежный'
};
$('input[name="pass"]').displayPasswordStrength(optionalConfig);
}
});
// Restrict presentation length
$('#form1-text').restrictLength( $('#form1-text-max-length') );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment