3

我知道可能有几个人问过同样的问题，但我很难找到一个适合我所拥有的解决方案。我有表格，人们可以根据需要添加尽可能多的行（每行有 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/

4

1 回答 1

3

.validate()1）您在处理程序内部调用，click因此它没有在您的表单上正确初始化。您只需在 DOM 上调用一次，即可在表单上初始化插件。

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

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

4) 您必须在创建规则时将规则动态添加到新创建的字段中。调用.validate()不是执行此操作的方法...初始化后将忽略新规则/选项。您可以使用内置方法，例如rules('add')，甚至更简单，将其添加class="required"到新的输入字段中，此规则将被自动拾取。

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

演示：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();
        });

    });

});
于 2013-03-25T23:10:27.353 回答