Правила проверки Jquery, после отправки, сначала проверяют «retype-password» (только если мы введем неправильный пароль в обоих полях, а остальные поля пусты) - PullRequest
1 голос
/ 03 июля 2019

enter image description here Я использую "правила проверки jquery"

мои правила проверки jquery работают нормально во время размытия и табуляции ... но проблема в том, что ... после нажатия кнопки "Отправить", сначала отдается предпочтение проверке пароля и подтверждению пароля ... затем идет проверка других полей ... как я могу решить это?

снимок экрана во время нажатия кнопки "Отправить" ... после нажатия кнопки "Отправить" ... он дает первое предпочтение проверке пароля-подтверждения вместо последовательной проверки .. почему это происходит

после нажатия на кнопку "отправить" .. он должен проверяться сверху вниз, поля ... но сначала проверяется поле подтверждения пароля

для проверки формы, но во время проверки проверьте, что проверка «retype-password» в первую очередь означает атрибут «equalTo» (только если мы введем неверный пароль в обоих полях, а остальные поля пусты)

Сначала проверяется "retype-password" .. затем проверяются другие поля ..

Я хочу проверить параметры проверки в соответствии с позициями поля формы

Вы можете ясно увидеть проблему на скриншоте .. «Правила проверки jquery» сначала проверяют «retype-password» (только если мы вводим неверный пароль в обоих полях, а другие поля пусты) .. во время этого не отображается другая проверка Сообщения об ошибках. Если оба поля пароля совпадают, отображаются сообщения об ошибках проверки для оставшихся полей формы.

Фрагмент моего кода:

<script>

  $(document).ready(function () {

    jQuery.validator.addMethod("lettersonly", function(value, element) {
        return this.optional(element) || /^[a-z]+$/i.test(value);
      }, "Letters only please");

    $('#signup').validate({
        onblur: true,
        onkeyup: false,
        onfocusout: function(element) {
          this.element(element);
        },
        rules: {
            "first_name": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              maxlength: 15,
              lettersonly: true
            },
            "last_name": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              maxlength: 15,
              lettersonly: true
            },
            "mobile_no": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              minlength: 10,
              maxlength: 10,
              digits: true
            },
            "email": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              email: true
            },
            "password": { 
              required: true,
              minlength: 4,
              maxlength: 4,
              digits: true
            },
            "conf_password": {
              required: true,
              equalTo: "#mainpassword"
            }
        },
        messages: {
            "first_name": {
              required: "First Name is required",
              maxlength: "First Name should be less than 15 characters"
            },
            "last_name": {
              required: "Last Name is required",
              maxlength: "First Name should be less than 15 characters"
            },
            "mobile_no": {
              required: "Mobile No is required",
              minlength: "Mobile No should be a 10-digit number",
              maxlength: "Mobile No should be a 10-digit number",
              digits: "Mobile No should contain only numbers"
            },
            "email": {
              required: "Email is required",
              email: "Invalid email Id"
            },
            "password": {
              required: "Password is required",
              minlength: "Password should be a 4-digit number",
              maxlength: "Password should be a 4-digit number",
              digits: "Password should contain only numbers"
            },
            "conf_password": {
              required: "Confirm Password is required",
              equalTo: "Password mismatch"
            }
        },

        invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                $("html, body").animate({
                    scrollTop:  $(validator.errorList[0].element).offset().top-100
                }, 500);
            }
        }
    });
  });
</script>

, пожалуйста, предложите мне изменения, чтобы избежать этой проблемы ..

(на скриншоте просто показана часть формы)

1 Ответ

1 голос
/ 03 июля 2019

Ваше описание очень неясно.

Вы можете ясно увидеть проблему на скриншоте .. "Правила проверки jquery" сначала проверяют "retype-password" ( только в том случае, если мы введем неправильный пароль в обоих полях, а другие поля пусты ) .. при этом не отображаются другие сообщения об ошибках валидации.Если оба поля пароля совпадают, отображаются сообщения об ошибках проверки для оставшихся полей формы.

Предполагается, что ошибки не будут отображаться ни для каких других полей, пока не будет нажата кнопка отправки или пользовательнапрямую взаимодействует с этими другими полями.Ошибки отображаются только для одного поля, когда пользователь взаимодействует с этим одним полем.Например, если вы взаимодействуете с полем xyz и нарушаете проверку, то будет отображаться только ошибка для поля xyz.

Если они пропускают поле «обязательное», поле «обязательное»сообщение не будет отображаться, пока не будет нажата кнопка отправки.ТОЛЬКО кнопка отправки может вызывать сообщения проверки для всех полей во всей форме.

В противном случае, я думаю, вы могли бы жаловаться на "нетерпеливую" проверку, которую вы вызвали здесь ...

onfocusout: function(element) {
    this.element(element);
},

Если вы просто полностью удалите эту опцию, вы вернетесь к стандартному поведению «ленивой» проверки, когда проверка игнорируется до тех пор, пока не будет нажата кнопка отправки в первый раз.

Для этого...

onblur: true

В плагине нет такой опции, которая называется onblur.Он называется onfocusout, и вы уже используете его.Я предлагаю вам прочитать документацию , потому что эти события (onfocusout, onkeyup, onclick) абсолютно никогда не могут быть установлены на true.

И, наконец, насколько Я не могу воспроизвести на основе вашего описания и кода:

https://jsfiddle.net/7yLhs96c/


РЕДАКТИРОВАНИЕ с объяснением и решением:

Новый jsFiddle OP: jsfiddle.net / hirayrakesh04 / c1q207zw / 6 /

Действия для воспроизведения :

  1. Введите 1234 в поле «пароль», оставьте остаток формы пустым.
  2. Введите 123 в поле «Подтверждение пароля».
  3. Нажмите кнопку отправки.

Обратите внимание, что появляется только сообщение об ошибке «Подтвердить пароль», но это все же, когда все сообщения в форме должны были появиться.

Объяснение проблемы :

  1. Поле «Подтверждение пароля» теряет фокус, когда кнопка отправки изначально задействована событием mousedown.Это запускает проверку для поля «Подтверждение пароля», как и ожидалось.

  2. Рядом с полем «Подтверждение пароля» появляется сообщение проверки, и оно нажимает кнопку отправки, чтобы освободить место для этого сообщения.

  3. Так как кнопка отправки теперь удалена, событие mouseup не может произойти для нажатия кнопки, и отправка никогда не происходит, поэтому остальная часть формы не проверена.

Решение состоит в том, чтобы исправить макет, чтобы кнопка отправки никогда не могла быть вытолкнута из-под мыши во время любой части нажатия кнопки.

DEMO: jsfiddle.net / c0345gLo /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...