使用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 
     });