Jquery 验证规则，提交后，首先检查 "retype-password" （仅当我们在两个字段中输入不匹配的密码且其他字段为空时）

Question

我正在使用"jquery validation rules"

我的 jquery 验证规则在模糊和制表符期间工作正常..但问题是..点击提交后，它首先优先检查密码和确认密码..然后它去验证另一个字段..我该如何解决这个问题？

屏幕截图是在点击提交按钮时..点击提交后..它优先考虑确认密码检查而不是顺序检查..为什么会这样

点击提交后..它应该从上到下验证字段..但它首先验证确认密码字段

用于表单验证，但在验证过程中检查它的检查 "retype-password" 意味着首先 "equalTo" 属性（仅当我们在两个字段中输入 mismacth 密码且其他字段为空时）

它首先检查 "retype-password".. 然后检查其他字段..

我想根据表单字段位置验证检查首选项

您可以在屏幕截图中清楚地看到问题。"jquery validation rules" 首先检查 "retype-password"（仅当我们在两个字段中输入 mismacth 密码且其他字段为空时）..在此期间它不显示其他验证错误消息。如果两个密码字段都匹配，则会显示剩余表单字段的验证错误消息。

我的代码片段：

<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>

请建议我进行更改以避免此问题..

（截图中，只显示部分表格）

Answer 1

你的描述很不清楚。

You can see the issue in screenshot clearly.. "jquery validation rules" checking "retype-password" first (only if we type mismacth password in both fields & other fields are empty).. during that its not showing other validation error messages. If both password fields matches then its showing validation error messages for remaining form fields.

在按下提交按钮或用户直接与其他字段交互之前，不应显示任何其他字段的错误。当用户与一个字段交互时，仅显示一个字段的错误。例如，如果您正在与 xyz 字段交互并违反验证，则只会显示 xyz 字段的错误。

如果他们跳过 "required" 字段，则在按下提交按钮之前不会显示 "required" 消息。只有提交按钮可以触发整个表单上所有字段的验证消息。

否则我认为您可能会抱怨 "eager" 验证，这是您在这里造成的...

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

如果您完全删除此选项，您将恢复到 "lazy" 验证的默认行为，在第一次单击提交按钮之前，验证将被忽略。

对于这个...

onblur: true

插件onblur中没有这个选项。它叫做 onfocusout，您已经在使用它了。我建议你 read the documentation 因为这些事件 (onfocusout, onkeyup, onclick) 绝对不能设置为 true.

最后，就你的图片而言，根据你的描述和代码，我无法复制：

https://jsfiddle.net/7yLhs96c/

已编辑解释和解决方案：

OP 的新 jsFiddle：jsfiddle.net/hirayrakesh04/c1q207zw/6/

重现步骤：

在 "password" 字段中输入 1234，将表格的其余部分留空。
在 "confirm password" 字段中输入 123。
点击提交按钮。

请注意，只有 "confirm password" 的错误消息出现，但此时表单上的所有消息也应该出现。

问题说明:

"Confirm password" 字段在提交按钮最初与 mousedown 事件交互时失去焦点。这会按预期触发 "confirm password" 字段的验证。
验证消息出现在 "confirm password" 字段旁边，它将提交按钮推到上方以为该消息腾出空间。
由于提交按钮现在被推开，点击按钮不会发生 mouseup 事件并且提交永远不会发生，因此表单的其余部分未通过验证.

解决方案是修复布局，使提交按钮在单击按钮的任何部分都不会从鼠标下方推出。

演示：jsfiddle.net/c0345gLo/

Jquery 验证规则，提交后，首先检查 "retype-password" （仅当我们在两个字段中输入不匹配的密码且其他字段为空时）

Jquery validation rules, after submit, checking "retype-password" first (only if we type mismacth password in both fields & other fields are empty)

javascript

jquery

jquery-validate