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

时间:2012-06-01 01:39:05

标签: jquery jquery-plugins jquery-validate

我有以下表格。我试图使用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>

5 个答案:

答案 0 :(得分:16)

你有两个问题:

  1. 您没有正确选择form元素。

    您正在寻找form id“凭证”并且您的标记不包含一个。您可能希望将选择器更改为:

    $("form[name='voucherform']").validate({ ... });
    
  2. 括号([])在JavaScript标识符中无效。这意味着您的脚本未正确解析。要解决此问题,只需将带括号的字段用引号括起来,即'reg_number[]'而不是reg_number[]

  3. 调整验证码:

    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/

答案 1 :(得分:6)

我在这里找到了最好的答案 https://stackoverflow.com/a/17643385/146553

如果您的元素名称具有索引,则将它们视为唯一名称 req_number [0] req_number [1] ECT ....

答案 2 :(得分:5)

你可以在这里找到一个好的答案: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();
}

答案 3 :(得分:1)

这是我的方式

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

希望它对你没什么帮助。

答案 4 :(得分:0)

只需共享一个方法来验证带索引的复选框,其中只有一个是必需的。

onStop

Jquery验证:

<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">