强制引发jquery验证器错误

Question

我正在使用ajax表单的jQuery Validate插件。

验证我已使用的每个字段data-rule-required="true"。

现在我有四个字段（读作4个信用卡字段）。现在所有这些领域分开得到所需的错误。

我想结合它们的值并发送抛出一个错误附加到一个错误的领域。

我曾尝试以下：

form3_validation.showErrors({ 
    "field_name1": "This is error" 
}); 

但它抛出一个错误，即使它们是有效的各个领域。我只想瞄准那个领域。

Answer 1

首先，从这些字段删除data-rule-required="true"。

通常处理的方式是the require_from_group method。此方法允许您将多个字段视为一个字段。将它与the groups option组合起来，为此组中的所有字段获取单个消息。

$(document).ready(function() { 

    $('#myform').validate({ 
     groups: { 
      creditcard: "foo1 foo2 foo3 foo4" 
     }, 
     rules: { 
      // some other rules here 
     }, 
     errorPlacement: function(error, element) { 
      error.insertBefore(element); 
     } 
    }); 

    var myGroup = $('.mygroup'); 

    myGroup.each(function() { 
     $(this).rules('add', { 
      require_from_group: [4, myGroup], 
      messages: { 
       require_from_group: "credit card number required" 
      } 
     }); 
    }); 

}); 

• 所有四个字段共享称为mygroup类名称用来 识别这些。
• require_from_group方法是the additional-methods.js file的一部分，所以不要忘记也包括这个 。
• 我用.rules()方法简单地以避免必须定义 相同规则 .validate()方法的rules对象内四个单独倍。

DEMO：jsfiddle.net/9sxt9u1a/

---

以上回答您的问题按照客户的要求。但是，additional-methods.js文件已包含几个信用卡字段的现成规则。与分组中的四个数字框相比，实施起来更简单，更容易。

Answer 2

更新：OP澄清说用户是关于jQuery Validate插件，而不是JS中的通用数据验证。留下这个答案，因为它不完全相关，但可能仍然有助于某人。

您可以为每个字段添加标识（例如，数据属性data-field-id），然后遍历每个输入字段并报告错误（如果其中一个为空）。

这将通过每个输入框并具体报告哪一个是问题，因为它们都由标识符标记。

var fields = $(".field"); 
 
$("button[type=submit]").click(function() { 
 
    var error = false; 
 
    fields.each(function() { 
 
    if(error) { 
 
     return; 
 
    } 
 
    if($(this).val() === "") { 
 
     error = "Error: required field " + $(this).data("field-id") + " is blank."; 
 
    } 
 
    }); 
 
    if(error) { 
 
    alert(error); 
 
    } else { 
 
    alert("All good!"); 
 
    } 
 
});

.field { 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="field" data-field-id="1" type="number">- 
 
<input class="field" data-field-id="2" type="number">- 
 
<input class="field" data-field-id="3" type="number">- 
 
<input class="field" data-field-id="4" type="number"> 
 
<button type="submit">Submit</button>