强制抛出jquery验证器错误

时间:2017-07-17 11:18:50

标签: javascript jquery jquery-validate

我正在使用jQuery Validate插件来获取ajax表单。

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

现在我有四个字段(读作4个信用卡字段)。现在,对于所有这些字段,我将获得所需的错误。

我希望将它们的值组合在一起并发送一个附加到一个错误字段的错误。

我尝试了以下内容:

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

但即使它们有效,它也会为每个字段抛出错误。我想只针对那个领域。

2 个答案:

答案 0 :(得分:1)

更新: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>
&#13;
&#13;
&#13;

答案 1 :(得分: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()方法只是为了避免必须定义 同一规则在rules对象内的四个不同时间 .validate()方法。

DEMO:jsfiddle.net/9sxt9u1a/

以上根据客户的要求回答您的问题。但是,additional-methods.js文件已包含几个可用于信用卡字段的规则。它比分组中有四个数字框更清晰,更容易实现。