Плагин проверки jQuery: использование нескольких errorLabelContainers

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 , подобный этому:

$("#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);
    }
});

Я выделяю недопустимые поля, изменяя класс элементов и добавляя рядом небольшую иконку;это прекрасно работаетОднако в дополнение к выделению я хотел бы отобразить сообщения, определенные в myMessages, либо в errorMessageLogin, либо в errorMessageSignup на основе выбора в радиогруппе userAction.Однако, похоже, что значение errorLabelContainer должно быть объектом jQuery, а не функцией, что вызывает сожаление, поскольку я смогу определить, какую ошибку показывать в функции.

Возможно ли это как-топереключить контейнер ошибок, который будет использоваться плагином jQuery Validation?

Answer 1

Вы можете использовать обратный вызов errorPlacement внутри объекта проверки, чтобы настроить размещение созданных меток ошибок. Эта функция принимает два параметра: ошибка и элемент. Пример из документации 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);
}
});