使用带有动态表单元素的{jQuery Validation Plugin}

时间:2015-07-03 00:48:13

标签: javascript jquery jquery-validate

我有一个包含多个表单的页面,每个表单可以包含任意数量的名称中具有公共根目录的元素。我在提交表单时尝试使用this answer来验证表单,但我在TypeError: a.data(...) is undefined上收到jquery.validate.js错误。我的代码如下。

    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>

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

我认为您必须在表单上调用.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();
    }
};