14

我有一个具有动态数量的字段组的阶段的表单，其中数字基于前一阶段的答案。

我将字段服务器端生成为数组，即

<input id="foo[0]"...
<input id="bar[0]"...

<input id="foo[1]"...
<input id="bar[1]"...

<input id="foo[2]"...
<input id="bar[2]"... etc

无论数字是多少，所有字段都是必需的，并且在某些情况下，我还需要根据类型和位数进行验证。我正在使用jQuery validate 插件进行客户端处理（是的，也备份了服务器端的东西）&验证不能内联完成，因为表单需要通过 XHTML Strict（编辑：请参阅下面的附录） .

我的问题是我无法弄清楚如何使用动态数量的字段进行验证。以下是表单其余部分的验证语法通常如下所示：

$(document).ready(function() {

    // validate stage_form on keyup and submit
    var validator = $("#form_id").validate({

        // rules for field names
        rules: {

            name: "required", 
            address: "required",
            age: { required: true, number: true }

        },

        // inline error messages for fields above
        messages: {

            name: "Please enter your name", 
            address: "Please enter your address",
            age: { required: "Please enter your age", number: "Please enter a number" }

        }

    });

});
4

5 回答 5

13

实际上，如果您使用类而不是将规则初始化为 validate() 选项，它应该可以工作。

标记：

<input id="foo[0]" class="required"
<input id="bar[0]" class="required number"

<input id="foo[1]" class="required"
<input id="bar[1]" class="required email"

jQuery：

$(document).ready(function() {

  var validator = $("#form_id").validate({
    messages: {
            name: "Please enter your name", 
            address: "Please enter your address",
            age: { 
               required: "Please enter your age", 
               number: "Please enter a number" 
            }

    }

  });

});

希望这有效。思南。

于 2009-09-06T18:59:56.297 回答
2

您是否尝试过使用自定义类规则来定义 xhtml 不兼容的规则？

文档中的示例仅使用一个类，但我想您可以组合不同的自定义类来实现您需要的验证规则。我自己没有试过这个。

于 2009-09-04T15:32:30.943 回答
0

没有答案，所以我将发布我的“临时”解决方案，即为“必需”和“类型”设置内联验证规则，将“最大长度”留给服务器端检查，然后显示带有内联标题标签的自定义消息。

对于这项工作来说，这可能已经足够了，但我仍然很好奇是否有办法在 jQuery 中“完全”完成它。

于 2009-06-28T22:31:12.120 回答
0

这是另一种方法。

/* Normal validate initialisation. */
$('#myForm').validate({

    /* Use the submitHandler method to add custom-selector-based validation. */
    submitHandler: function(form, ev) {

        /* Find your dynamic field/s. Note that you may want to access them via a scope external to validate, as any selection you do in this internal scope will be static from the form's pre-edit state. */
        var el = $('#selector');

        /* Do your custom validation. */
        if (  el.val() !== 'A'  ) {

            /* Show any errors:- 'fieldname': 'error message'. */
            this.showErrors({
                'name-of-a-field-near-where-you-want-your-error-placed': 'Please enter "A" to continue'
            });

            /* Prevent form submission. */
            return;
        } 
    }
});
于 2015-11-20T14:51:35.313 回答
-2

我找到了一种使用“元数据”的方法。

这应该在具有动态名称的模板中使用。所以，我不需要知道名字。

缺点仍然是无法使用带有干净标签的纯 javascript 代码。

<script src="jquery.metadata.js" type="text/javascript"></script>

<input validate="{required: true, email: true, messages: { required: 'i'm required', 'i'm not valid e-mail' }}" name="dynamicRow[  myRandomNumber ]"type="text" class="input_normal" />

 $( function() {
     // setup stuff
     $.metadata.setType("attr", "validate"); 
});
于 2011-08-15T19:28:40.930 回答