JQuery.Validate() для идентичных форм

Question

Я пытаюсь переопределить стиль ошибки по умолчанию в jQuery.Validate(). Вместо того, чтобы настройки по умолчанию печатали темно-красную метку, я попытался создать ее вместо родителя div. Итак, вот сделка: У меня две идентичные формы, (веб-редактор может выбрать, сколько он хочет), на той же странице. Каждая форма имеет один и тот же класс: .formClass.

Код ниже определен в области $ (document) .ready и настраивает «список правил {}» для всех обязательных полей.

$(".formClass").find("input[data-val-required]").each(function() { 
    var name = $(this).attr("name").toLowerCase(); 
    if (name.match("email")) { 
     $(this).rules('add', { 
      email: true 
     }); 
    } 
    $(this).rules('add', { 
     required: true 
    }); 
}); 

и Heres основной функцией:

$(".formClass").validate({ 
//errorLabelContainer: '#testestets', //Displays a collection of the generated error messages 
focusInvalid: true, 
errorElement: "div", 
wrapper: 'div', // a wrapper around the error message 
errorPlacement: function (error, element) { 
    $(element).closest('.form-field').addClass("errorOnThis"); 
}, 
messages: { 
    name: { 
     required: "testing..", 
    }, 
}, 

invalidHandler: function (event, validator) { 
    var errors = validator.numberOfInvalids(); 
    alert(errors); 

}, 
highlight: function (element, errorClass, validClass) { 
    $(element).addClass(errorClass); 
} 

});

Форма имеет только два поля: Имя и адрес электронной почты. Если я отправлю форму, давайте скажем нулевое значение для Name. Он выделит ввод вместе с моим желаемым стилем. Однако, если я отправлю его снова, не изменяя имя на допустимое значение, форма отправляется независимо от любых недопустимых входов. Зачем?

Другой вопрос: только моя первая форма получает эти пользовательские изменения, моя вторая форма, которая выглядит идентичной первой, по-прежнему получает сообщения об ошибках по умолчанию. Смущенный.

Есть ли способ обработки ошибок на обратный вызов, как `

highlight: function (element, errorClass, validClass) { 

    $(element).parents("form:first").find("input[type='submit']").attr("disabled", "disabled"); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     if (!element.isValid()) { 
      highlight(element, errorclass, validClass); 
     } else { 
      $(element).parents("form:first").find("input[type='submit']").removeAttr("disabled");   } 

    }` 

Я пробовал, но это не сработало, так что если кто-то может найти недостатки в моем коде я бы навсегда благодарен :)

Answer 1

«Я пытаюсь переопределить стиль ошибки по умолчанию в jQuery.Validate(). Вместо того, чтобы настройки по умолчанию печатали темно-красную метку, я попытался создать вместо нее родительский div».

В плагине jQuery Validate нет стилей сообщений об ошибках. Он просто создает разметку HTML для сообщения и применяет класс error. Вам нужно создать CSS. Так что, если он темно-красный, то это то, что вы делаете в своем CSS, а не плагин.

У меня есть две идентичные формы, (веб-редактор может выбрать, сколько он хочет), на той же странице. Каждая форма имеет один и тот же класс: .formClass.

....

Только моя первая форма получает эти пользовательские изменения, моя вторая форма, которая выглядит идентично первому, по-прежнему получает сообщения об ошибке по умолчанию. Смущенный.

Вы не можно прикрепить .validate() к селектору JQuery, который представляет более одного элемента. Если вы хотите, чтобы те же настройки применялись к двум формам с использованием одного и того же имени класса, вам понадобится jQuery .each(). В противном случае к .validate() прилагается только первая форма.

$(".formClass").each(function() { 
    $(this).validate({ 
     // your options 
    }); 
}); 

Что касается вашего кода здесь:

unhighlight: function (element, errorClass, validClass) { 
    if (!element.isValid()) { 
     highlight(element, errorclass, validClass); // <-???? 
    .... 

Там нет такого понятия, как highlight() и это нарушило бы код. highlight - это опция метода .validate(), а не функция, которую вы можете просто вставить туда, где хотите.

Кроме того, вы не включаете и не выключаете кнопку в пределах highlight/unhighlight. highlight и unhighlight предназначены для добавления/удаления классов в отдельных полях формы, так как эти поля формы становятся действительными/недействительными. Все, что вы помещаете внутри highlight/unhighlight, перевернет поведение по умолчанию. Если вы хотите переключить атрибут кнопки disable, вы, вероятно, захотите использовать опции submitHandler и invalidHandler, где submitHandler стреляет действительной формой и invalidHandler не работает.