使用jQuery Validate插件验证动态创建的内容

Question

我知道有几个人可能会问过同样的问题，但我很难找到能够解决问题的解决方案。我有一个表格，人们可以根据需要添加尽可能多的行（每行有4个输入框），如果不使用它们就删除它们。我正在使用.append（）jquery函数来添加行并让它工作。

我很难弄清楚如何验证新的输入框。对于我想要做的事情，有没有人有一个很好的解决方案？这是我的代码的链接：

$(document).ready(function () {

var count = 1;
$('p#add_field').click(function () {

    count += 1;

    $('table#entries').append(
        '<tr>' +
        '<td><input id="cl_' + count + '" name="cl[]' + '" type="text" /></td>' +
        '<td><input id="num_' + count + '" name="num[]' + '" type="text" size="5"/></td>' +
        '<td><input id="description_' + count + '" name="description[]' + '" type="text" size="86"/></td>' +
        '<td><span class="delete">Remove</span></td></tr>');

    $(".delete").click(function () {
        $(this).closest('tr').remove();
    });

});





    // 1. prepare the validation rules and messages.
    var rules = {

        email: {
            required: true,
            email: true
        },
        lname: "required",
        fname: "required",
        city: "required",
        address: "required",
        'cl[]': "required",
        'num[]': "required",
        'description[]': "required",
        age: {
            required: true,
            number: true,
            maxlength: 3
        },
        phone: {
            required: true,
            phoneUS: true
        }



    }; // end var rules


    // 2. Initiate the validator
    var validator
        = new jQueryValidatorWrapper("FormToValidate",
            rules);

    // 3. Set the click event to do the validation
    $("#btnValidate").click(function () {
        if (!validator.validate())
            return;

        alert("Validation Success!");
    });
});

http://jsfiddle.net/9k7ph/4/

Answer 1

1）您在.validate()处理程序中调用click，因此未在表单上正确初始化。您只需在DOM上调用一次就可以初始化表单上的插件。

2）您也不需要将提交按钮放在点击处理程序中。 jQuery Validate插件已正确捕获click事件。

3）动态创建的字段必须具有唯一的name属性，否则插件将失败。

4）您必须在创建时将规则动态添加到新创建的字段中。调用.validate()不是这样做的方法...初始化后会忽略新的规则/选项。您可以使用rules('add')等内置方法，甚至更简单，将class="required"添加到新输入字段，系统会自动选择此规则。

我废弃了你的小提琴并从头开始...基本验证正在运行，现在你可以将其他插件重新分层。

DEMO：http://jsfiddle.net/X5EvD/

$(document).ready(function () {

    $("#FormToValidate").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            lname: "required",
            fname: "required",
            city: "required",
            address: "required",
                'cl[]': "required",
                'num[]': "required",
                'description[]': "required",
            age: {
                required: true,
                number: true,
                maxlength: 3
            },
            phone: {
                required: true,
                phoneUS: true
            }
        },
        submitHandler: function (form) {
            alert("Validation Success!");
            return false; // if you need to block normal submit because you used ajax
        }
    });

    var count = 1;
    $('p#add_field').click(function () {

        count += 1;

        $('table#entries').append(
            '<tr>' +
            '<td><input id="cl_' + count + '" name="cl[' + count + ']' + '" type="text" class="required"/></td>' +
            '<td><input id="num_' + count + '" name="num[' + count + ']' + '" type="text" size="5" class="required"/></td>' +
            '<td><input id="description_' + count + '" name="description[' + count + ']' + '" type="text" size="86" class="required"/></td>' +
            '<td><span class="delete">Remove</span></td></tr>');


        $(".delete").click(function () {
            $(this).closest('tr').remove();
        });

    });

});