andxbes

Документация

Переопределяем текст по умолчанию

    $.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> ?>