Jquery 验证一条规则失败不应跳转到另一条规则

Question

我正在使用 jquery 验证，我必须实现功能，以便如果任何规则失败，则表单不应提交。工作已完成验证工作正常。

问题是如果多个规则失败，它会在每个文本框中显示错误消息，失败会传播到所有规则。

我想实现一种功能，如果一个规则失败，它应该停止并仅显示该元素的错误消息。

<form id="myform">
 <label for="firstName">FirstName</label>
 <input class="left" id="fname" name="fname" />
 <br>
 <label for="lastName">LastName</label>
 <input class="left" id="lname" name="lname" />
 <br>
 <label for="fromDate">fromDate</label>
 <input class="left" id="fromDate" name="fromDate" />
 <br>
 <label for="endDate">endDate</label>
 <input class="left" id="endDate" name="endDate" />
 <br>
 <input type="submit" value="Validate!">
 </form>

规则：

$( "#myform" ).validate({
  rules: {
    fname:"required",
    lname:"required",
    fromDate:"required",
    endDate:"required"
  }
});

这是我的问题的演示 msg-"This field is required" 应该出现一次，即第一个文本框。错误不应传播到剩余的文本框。

如果有人明白我想要什么，请回复。（这是我的演示代码。）

Answer 1

您可以使用自定义错误处理程序 showErrors，您只需在错误列表中设置 第一个 发现的错误：

showErrors: function(errorMap, errorList) {
    if (errorList.length) {
       this.errorList = [errorList[0]];
    }

    this.defaultShowErrors();
  }

错误列表需要是一个数组，所以第一个错误放在定义数组的 [] 中。

所以你总共得到：

$("#myform").validate({
  rules: {
    fname: "required",
    lname: "required",
    fromDate: "required",
    endDate: "required"
  },
  showErrors: function(errorMap, errorList) {
    if (errorList.length) {
       this.errorList = [errorList[0]];
    }

    this.defaultShowErrors();
  }
});

JsFiddle

现在，如果您希望内部验证检查在出现第一个错误时停止。因此，不仅在视觉上没有显示错误，而且一旦一个字段是假的，实际上就会停止检查。您可以覆盖内部检查功能 checkForm().

我将简单地检查元素是 true 还是 false，一旦 false 我知道至少有一个字段是假的。所以我打破了检查循环：

validator.checkForm = function() {
  this.prepareForm();
  for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
    if (!this.check(elements[i]))
      return false;
  }
  return this.valid();
};

JsFiddle

现在我想提醒你我不是这个插件的创建者，所以我不完全知道这是否有效。我建议编写您自己的验证代码，以完全控制您正在做的事情。

Jquery 验证一条规则失败不应跳转到另一条规则

Jquery validation one rule fails should not jump to another rule

jquery

jquery-validate