使用jQuery验证插件验证数组输入

Question

我有以下表单。我正在尝试使用jQuery验证插件来验证输入。我尝试了一些代码，但它没有工作。当我点击提交按钮时，它会转到表单的操作。

<form name="voucherform" action="something" method="post"> 
    <input type="text" name="reg_number[]" value="" /> 
    <input type="text" name="reg_number[]" value="" /> 
    <input type="text" name="reg_number[]" value="" /> 
    <input type="submit" name="submit" value="submit" /> 

能否请你告诉我怎么使用jquery验证插件来验证上述形式？

谢谢:)

我的jQuery代码：

<script type="text/javascript" src="<?php echo base_url();?>support/datepicker/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url();?>support/js/jquery.validate.js"></script> 

<script> 
    $(document).ready(function() { 

// validate signup form on keyup and submit 
var validator = $("#voucherform").validate({ 
    showErrors: function(errorMap, errorList) { 
     $(".errormsg").html($.map(errorList, function (el) { 
      return el.message; 
     }).join(", ")); 
    }, 
    wrapper: "span", 
    rules: { 

     reg_number[]: { 
      required: true, 
      minlength: 2, 
      remote: { 
       url: '<?php echo base_url();?>sales/invoice_check', async: false, 
       type: 'post' 
      }, 

     } 
    }, 
    messages: { 

     reg_number[]: { 
      required: "Enter Reg Number", 
      minlength: jQuery.format("Enter at least {0} characters"), 
      remote: jQuery.format("{0} is already in use") 
     }, 
    } 
    }); 
    }); 
    </script> 

Answer 1

你有两个问题：

1. 你是不是正确的选择form元素。

   您在寻找form与id“voucherform”，并且您的标记不包含一个。你可能希望你的选择更改为：

   $("form[name='voucherform']").validate({ ... }); 
   

2. 支架（[]）无效在JavaScript标识符。这意味着你的脚本没有被正确解析。要解决这个问题，只需用引号括起括号内的那些字段，即'reg_number[]'而不是reg_number[]。

调整了验证码：

var validator = $("form[name='voucherform']").validate({ 
    showErrors: function(errorMap, errorList) { 
     $(".errormsg").html($.map(errorList, function(el) { 
      return el.message; 
     }).join(", ")); 
    }, 
    wrapper: "span", 
    rules: { 
     'reg_number[]': { 
      required: true, 
      minlength: 2, 
      remote: { 
       url: '<?php echo base_url();?>sales/invoice_check', 
       async: false, 
       type: 'post' 
      } 

     } 
    }, 
    messages: { 
     'reg_number[]': { 
      required: "Enter Reg Number", 
      minlength: jQuery.format("Enter at least {0} characters"), 
      remote: jQuery.format("{0} is already in use") 
     } 
    } 
}); 

例子：http://jsfiddle.net/hfrhs/

Answer 2

这里是我的方式

'reg_number[]':{ 
    required:function(){ 
     return $("input[name='reg_number[]']").filter(function(){ 
     return $.trim($(this).val()).length>0 
     }).length==0 
    } 
} 

希望它能对你有一点帮助。

Answer 3

我发现这里的最佳答案 https://stackoverflow.com/a/17643385/146553

，如果你的元素名称有他们被视为唯一的名称索引 req_number [0] req_number [1] ECT ....

Answer 4

你可以在这里找到一个很好的答案：jquery-validation-for-array-of-input-elements。在jquery.validate.js，我们可以发现一个名为checkForm功能，我们有如下修改它：

checkForm: function() { 
    this.prepareForm(); 
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) { 
    if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) { 
    for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) { 
     this.check(this.findByName(elements[i].name)[cnt]); 
    } 
    } else { 
    this.check(elements[i]); 
    } 
    } 
    return this.valid(); 
} 

Answer 5

只是共用一个方法来验证复选框索引而其中只有一个是强制性的。

<input type="checkbox" value="0" name="is_appraisal[0]" class="is_appraisal_f siblingcheckbox" id="is_appraisal_f"> 

<input type="checkbox" value="1" name="is_appraisal[1]" checked="checked" class="is_appraisal_s siblingcheckbox" id="is_appraisal_s"> 

jQuery验证了这一点：

 $.validator.addMethod("onechecked", function (value, elem, param) { 
      if ($(".siblingcheckbox:checkbox:checked").length > 0) { 
       return true; 
      } else { 
       return false; 
      } 
     }, "You must select at least one!"); 

     $.validator.addClassRules("siblingcheckbox", { 
      onechecked: true 
     });