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- “这是必须填写” 应出现一次，即对于第一个文本框。错误不应该传播到剩余的文本框。

，如果任何机构明白我想要的请回复（这是我的演示代码。）

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

现在我要提醒你，我不是这个插件的创造者，所以我不知道完全，如果这个工程相应。我会建议编写自己的验证代码，以完全控制你在做什么。