jquery - 使用 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 元素。

   您正在寻找 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/