将jQuery Validation插件与动态表单元素一起使用

Question

我有一个包含多个表单的页面，每个表单可以包含名称中具有相同根的任意数量的元素。 我正在尝试使用此答案来验证表单，但提交时出现TypeError: a.data(...) is undefined jquery.validate.js上的TypeError: a.data(...) is undefined错误。 我的代码如下。

    var valForm = function(kit_id) {
        $('input[name^="kit_desc_"]').each(function() {
            $(this).rules("add", {
                required: true,
                messages: {
                    required: "Please enter a description"
                }
            });
        });

        $("#frm_" + kit_id).validate({
            errorElement: "div",
            errorPlacement: function(error, element) {
                $("#error_modal").html(error);
            }
        });

        if (! $("#frm_" + kit_id).valid()) {
            // a dialog box will appear listing the errors.
            $("#error_modal").dialog();
        }
    };

单击链接时将调用该函数。

<a href="javascript:;" onclick="valForm(1);" class="button136">Save</a>

有什么建议么？

Answer 1

我认为你必须调用.validate()在表格上，然后才能调用.rules()在该表单的输入。 您还应该仅在提交表单的输入上调用.rules() 。

var valForm = function(kit_id) {
    var form = $("#frm_" + kit_id);
    form.validate({
        errorElement: "div",
        errorPlacement: function(error, element) {
            $("#error_modal").html(error);
        }
    });

    form.find('input[name^="kit_desc_"]').each(function() {
        $(this).rules("add", {
            required: true,
            messages: {
                required: "Please enter a description"
            }
        });
    });

    if (! form.valid()) {
        // a dialog box will appear listing the errors.
        $("#error_modal").dialog();
    }
};