Question

我有一个表单，根据userAction单选组的选定值，显示loginFields或signupFields。另外，我有两个错误容器 - 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 Validation Plugin：

$("#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 Validation插件使用的错误容器？

Answer 1

您可以在验证对象中使用errorPlacement回调来自定义创建的错误标签的位置。此函数接受两个参数：error和element。来自jQuery docs（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);
}
});

jQuery Validation Plugin：使用多个errorLabelContainers

3 个答案: