jQuery 表单验证 : Define container for errors

Question

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

假设我有 2 个输入，一个带有 id name，另一个带有 firstname。我们还假设我有 2 个错误范围，id 分别为 errorName 和 errorFirstname。如何告诉 jQuery 将 name 的验证错误写入 ID 为 errorName 的范围内。

这是我当前的 jQuery:

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

Answer 1

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

Customize placement of created error labels. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object.

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

$("#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/