jQuery表单验证:定义错误容器

时间:2012-05-23 15:43:42

标签: jquery validation error-handling jquery-validate

我正在使用jQuery验证插件来验证我的表单。它工作(将错误消息放在无效输入旁边,这会搞砸我的设计),但我想为每个输入字段指定错误容器。我找到了errorLabelContainer,但这会将所有错误放在一个容器中。

比方说,我有2个输入,一个标识为name,另一个标记为firstname。我们还假设我有2个错误跨度,其中包含ID errorNameerrorFirstname。如何告诉jQuery将name的验证错误写入标识为errorName的范围内。

这是我目前的jQuery:

$("#form").validate({
    errorLabelContainer: "#errors",
        rules: {
            name: {
                required: true
            },
            firstname: {
                required: true
            }
        },
        messages: {
            name: {
                required: "Enter name"
            },
            firstname: {
                required: "Enter firstname"
            }
        }
    })

1 个答案:

答案 0 :(得分:13)

我认为errorPlacement选项符合您的需求:

  

自定义已创建错误标签的展示位置。第一个参数:创建的错误标签为jQuery对象。第二个参数:作为jQuery对象的无效元素。

您可以根据无效元素确定要放入错误的元素:

$("#form").validate({
    rules: {
        name: {
            required: true
        },
        firstname: {
            required: true
        }
    },
    messages: {
        name: {
            required: "Enter name"
        },
        firstname: {
            required: "Enter firstname"
        }
    },
    errorPlacement: function ($error, $element) {
        var name = $element.attr("name");

        $("#error" + name).append($error);
    }
});

示例: http://jsfiddle.net/R3aEQ/