Примеры работы с jQuery Validate

Если у вас есть некая html-форма и вам необходимо валидировать в ней поля перед отправкой, самый простой способ - использовать jQuery Validate и не писать свой велосипед.

Подключить - это как два пальца об асфальт:

<script src="/../js/jquery.validate.min.js"></script>

Просто вставить этот код после подключения jQuery.

<form method="POST" action="" id="reguser" class="validate" onchange="valid()">
<input class="form-control required" name="SURNAME" id="SURNAME" value="" autocomplete="off">
<button type="submit" class="btn btn-success w-100" id="submitreg">Регистрация</button>
</form>
 
<script>
function valid(editlink=null) {
event.preventDefault();
$("#reguser").validate({
invalidHandler: function(event, validator) {
 var errors = validator.numberOfInvalids();
 if (errors) {
 var message = errors == 1
 ? 'You missed 1 field. It has been highlighted'
 : 'You missed ' + errors + ' fields. They have been highlighted';
 // alert(message);
 console.log(message);
 }
 },
 submitHandler: function(form){
 aj_req($("#reguser").serialize(),'userapi/save',event);
 },
// переводы сообщений
 messages:{

 "SURNAME" : {
 required : "Пустое поле \"фамилия\""
 },
},
// правила валидации
rules: {
 "INN": {
 required: true,
 minlength: 10,
 maxlength: 10,
 digits: true
 },
 "PASSPORTNUM": {
 required: true,
 minlength: 6,
 maxlength: 9,
 digits: true
 },
 "PASSPORTSER": {
 required: false,
 minlength: 2,
 maxlength: 2
 },
 "EMAIL": {
 required: true,
 email: true
 }
},
 });
 }
</script>

При изменении полей будет вызываться функция valid() и выдавать сообщения около каждого поля в соответствии с правилами валидации.

Список правил:

required — поле обязательное для заполнения (true или false);

remote — указывается файл для проверки поля (например: "check.php");

email — проверяет корректность e-mail адреса (true или false);

url — проверяет корректность url адреса (true или false);

date — проверка корректности даты (true или false);

dateISO — проверка корректности даты ISO (true или false);

number — проверка на число (true или false);

digits — только цифры (true или false);

creditcard — корректность номера кредитной карты (true или false);

equalTo — равное чему-то (например другому полю equalTo: "#pswd");

accept — проверка на правильное расширение (accept: "xls|csv");

maxlength — максимальное кол-во символов;

minlength — минимальное кол-во символов;

rangelength — кол-во символов от скольких и до скольких (rangelength: [2, 5]);

range — число должно быть в диапазоне от и до (range: [2, 12]);

max — максимальное значение числа;

min — минимальное значение числа.

Документация: jqueryvalidation.org/documentation

Скачать плагин: github.com/jquery-validation/jquery-validation