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"
  }
});

这是我的问题的演示消息 - ＆＃34;此字段是必需的＆＃34;应出现一次，即第一个文本框。错误不应传播到剩余的文本框。

如果任何机构了解我想要的内容，请回复。（这是我的演示代码。）

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

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