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

Validating array inputs using jquery validation plugin

提问by black_belt

I have the following form. I am trying to validate the inputs using jquery validation plugin. I have tried some codes but its not working. When I click on the submit button it just goes to form's action.

我有以下表格。我正在尝试使用 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" />

Could you please show me how to validate the above form using jquery validation plugin?

你能告诉我如何使用 jquery 验证插件来验证上面的表单吗？

Thanks :)

谢谢 ：）

My Jquery code:

我的 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>

回答by Andrew Whitaker

You have two problems:

你有两个问题：

1. You aren't selecting the formelement properly.

   You're looking for a formwith id"voucherform" and your markup does not contain one. You probably want to change your selector to:

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

2. Brackets ([]) are not valid in JavaScript identifiers. This means that your script is not being parsed correctly. To resolve this, just wrap those fields that have brackets in them in quotes, i.e. 'reg_number[]'instead of reg_number[].

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

   您正在寻找form带有id“凭证”的，而您的标记不包含一个。您可能希望将选择器更改为：

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

2. 括号 ( []) 在 JavaScript 标识符中无效。这意味着您的脚本没有被正确解析。要解决这个问题，只需将那些包含括号的字段用引号括起来，即'reg_number[]'代替reg_number[].

Tweaked validate code:

调整验证代码：

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")
        }
    }
});

Example:http://jsfiddle.net/hfrhs/

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

回答by Alex

You can find a good answer here: jquery-validation-for-array-of-input-elements. In jquery.validate.js, we can find a function named checkForm, we have to modify it as below:

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

回答by user995789

here is my way

这是我的方式

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

Hope it has little help for you.

希望对你帮助不大。

回答by Bugfixer

Just sharing a method to validate checkbox with index and only one of them is mandatory.

只需共享一种方法来验证带有索引的复选框，并且只有其中一个是强制性的。

<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 Validation for this :

对此的 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
        });