jQuery 验证插件：使用多个 errorLabelContainers

Question

我有一个表单，根据 userAction 单选组的选定值，显示登录字段或注册字段。另外，我有两个错误容器 - errorMessageLogin 和 errorMessageSignup - 用于显示与 userAction 的选定值相对应的错误消息：

<div id="errorsSection">
    <div id="errorMessageLogin">
        <!-- Login Error Messages go here -->
    </div>                

    <div id="errorMessageSignup">
        <!-- Signup Error Messages go here -->
    </div>
</div>
<div id="contentSection">Lorem ipsum dolor sit amet...</div>
<div id="formSection">
    <form id="myForm">
        <input name="userAction" type="radio" value="login" checked="checked">Login</input>
        <br />
        <input name="userAction" type="radio" value="signup">Sign Up</input>

        <div id="loginFields" style="display:none">
            <!-- Login fields: email address and, password -->
        </div>

        <div id="signupFields" style="display:none">
            <!-- Signup fields: name, age, email address, and password -->
        </div>
    </form>
</div>

我正在使用 jQuery 验证插件 像这样：

$("#myForm").validate({
    submitHandler: function (form) {
        MyWebService.DoWork(form);
    },
    rules: myRules,
    errorLabelContainer: null, // how to determine at runtime?
    messages: myMessages,
    highlight: function (element, errorClass) {
        $(element).prev().addClass(errorIcon);
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
    },
    unhighlight: function (element, errorClass) {
        $(element).prev().removeClass(errorIcon);
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
    }
});

我通过更改元素类并在附近添加一个小图标来突出显示无效字段；这很好用。但是，除了突出显示之外，我还想根据 userAction 单选组中的选择在 errorMessageLogin 或 errorMessageSignup 中显示 myMessages 中定义的消息。然而，errorLabelContainer 的值似乎是一个 jQuery 对象而不是一个函数，这很不幸，因为我能够确定在函数中显示哪个错误。

是否可以以某种方式切换 jQuery 验证插件使用的错误容器？

Answer 1

您可以在验证对象内使用 errorPlacement 回调来自定义创建的错误标签的位置。该函数接受两个参数：error 和 element。
jQuery 文档中的示例 ( http://docs.jquery.com/Plugins/Validation/validate):

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

Answer 2

我猜你不能使用两种不同的形式？这将是分离错误消息功能的更简单的方法吗？只隐藏一种形式或另一种形式？

Answer 3

这尚未经过测试，而是一个让您踏上这条道路的想法......

$("#myForm").validate({
submitHandler: function (form) {
    MyWebService.DoWork(form);
},
rules: myRules,
errorLabelContainer: function () {
    var rdoValue = $("input[name='userAction']:checked").val();
    // branch and return the container based on value...
},
messages: myMessages,
highlight: function (element, errorClass) {
    $(element).prev().addClass(errorIcon);
    $(element).addClass(errorClass);
    $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
},
unhighlight: function (element, errorClass) {
    $(element).prev().removeClass(errorIcon);
    $(element).removeClass(errorClass);
    $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
}
});