Question

我正在使用“ jquery验证规则”

我的jquery验证规则在模糊和制表符期间工作正常..但问题是..单击提交后，它的首选设置为检查密码和确认密码..然后它去验证另一个字段..我能解决这个问题吗？

屏幕快照是在单击“提交”按钮期间进行的。.在单击“提交”之后。其优先选择确认密码检查而不是顺序检查。为什么会发生

在点击提交后。它应该从上到下进行验证。.但是首先要验证确认密码的字段

用于表单验证，但在验证期间检查其检查，“ retype-password”首先意味着“ equalTo”属性（仅当我们在两个字段中均输入错误密码且其他字段为空时）

首先检查“重新输入密码”。然后检查其他字段。

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

您可以在屏幕快照中清楚地看到该问题。.“ 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>

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

（在屏幕截图中，仅显示了表单的一部分）

Answer 1

您的描述非常不清楚。

您可以在屏幕快照中清楚地看到问题。.“ jquery验证规则”首先检查“重新输入密码”（仅当我们在两个字段中均输入错密码且其他字段为空时）。在此期间，它不会显示其他验证错误消息。如果两个密码字段都匹配，则显示剩余表单字段的验证错误消息。

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

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

否则，我认为您可能会抱怨“急切”的验证，这是在这里引起的...

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

如果只是简单地完全删除此选项，则将恢复为默认的“惰性”验证行为，在这种情况下，验证将被忽略，直到首次单击“提交”按钮为止。

为此，...

onblur: true

名为onblur的插件中没有这样的选项。它称为onfocusout，并且您已经在使用它。我建议您read the documentation，因为绝对不能将这些事件（onfocusout，onkeyup，onclick）设置为true。

最后，就您的照片而言，我无法根据您的描述和代码进行复制：

https://jsfiddle.net/7yLhs96c/

编辑后附有说明和解决方案：

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

复制步骤：

在“密码”字段中输入1234，其余形式留空。
在“确认密码”字段中输入123。
点击提交按钮。

请注意，仅出现“确认密码”错误消息，但这是表单上的所有消息也应该出现的时候。

问题说明：

最初将提交按钮与mousedown事件配合使用时，“确认密码”字段将失去焦点。这将按预期触发对“确认密码”字段的验证。
“确认密码”字段旁边将显示一条验证消息，并按下“提交”按钮为该消息腾出空间。
由于现在已经取消了提交按钮的操作，因此单击按钮不会发生mouseup事件，并且提交也不会发生，因此表单的其余部分均未通过验证。

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

演示：jsfiddle.net/c0345gLo/

jQuery验证规则，提交后，首先检查“ retype-password”（仅当我们在两个字段中均输入错密码且其他字段为空时）

1 个答案: