Переопределяем текст по умолчанию
$.extend(jQuery.validator.messages, { required: "Это поле обязательно к заполнению.", remote: "Пожалуйста, исправьте это поле.", email: "Пожалуйста, введите действительный адрес электронной почты.", url: "Пожалуйста, введите корректный URL адрес.", date: "Пожалуйста, введите правильную дату.", dateISO: "Пожалуйста, введите правильную дату (ISO).", number: "Пожалуйста, введите правильное число.", digits: "Пожалуйста, вводите только цифры.", creditcard: "Пожалуйста, вводите правильный номер карты", equalTo: "Пожалуйста, введите то же значение снова.", accept: "Пожалуйста, введите значение с допустимым расширением.", maxlength: jQuery.validator.format("Пожалуйста, введите не более {0} символов."), minlength: jQuery.validator.format("Пожалуйста, введите не менее {0} символов."), rangelength: jQuery.validator.format("Пожалуйста, введите значение между {0} и {1} символов."), range: jQuery.validator.format("Пожалуйста, введите значение между {0} и {1}."), max: jQuery.validator.format("Пожалуйста, введите значение меньше или равно {0}."), min: jQuery.validator.format("Пожалуйста, введите значение, большее или равное {0}.") });
Задаем правила по классам полей , не обязательно указывать required , читается после из параметров тега автоматически
$.validator.addClassRules({ "f-name": {//ФИО // required: true, minlength: 6 }, "f-email": {//e-mail // required: true, email: true }, "f-phone": {// phone // required: true, minlength: 11 }, "f-phone_email": { // required: true, minlength: 6 }, "captha-field": { required: true } });
Одна функция для подписки на проверку
function valid_avail($form) { $form.validate({ errorClass: 'error is-invalid-input', rules: { }, messages: { }, invalidHandler: function (event, validator) { $("div[id^='wait_comp_']").remove(); // количество ошибок var errors = validator.numberOfInvalids(); console.log(errors); } }); }
Далее пример использования функции из битрикс шаблона .
Меняем шапку формы , вместо вывода $arResult[“FORM_HEADER”]
<form class="form-<?= $arResult["WEB_FORM_NAME"] ?>" name="<?= $arResult["WEB_FORM_NAME"] ?>" action="<?= POST_FORM_ACTION_URI ?>" method="POST" enctype="multipart/form-data" > <input type="hidden" name="WEB_FORM_ID" value="<?= $arParams["WEB_FORM_ID"] ?>"> <?= bitrix_sessid_post() ?> <?php // print $arResult["FORM_HEADER"]?>
Затем в каждой форме в конце документа, перед $arResult[“FORM_FOOTER”]
<!-- ..... ..... .----> <script> (function () { try { //for ajax valid_avail($('form.form-<?= $arResult["WEB_FORM_NAME"] ?>')); } catch (ex) { document.addEventListener('DOMContentLoaded', function () { try { valid_avail($('form.form-<?= $arResult["WEB_FORM_NAME"] ?>')); } catch (ex) { console.error(ex); } }); } })(jQuery); </script> <?= $arResult["FORM_FOOTER"] //</form> ?>