Как показать ошибку проверки jQuery в текстовом поле на основе скрытого поля ввода?

Question

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

<input id="template" type="text" class="text inactive" value="Select a template...">
<span class="button">Select...</span>

<input id="templateid" type="hidden" class="required" name="template" title="You must select a template.">

Когда пользователь нажимает кнопку Выбрать ... , появляется модальное диалоговое окно, позволяющее пользователю выбрать шаблон. После того как пользователь завершил выбор шаблона, в текстовом поле template указывается имя шаблона, а в скрытом поле templateid - идентификатор шаблона:

$('#templateDialog .okButton').click(function() {
    var item = $(this).find('li.selected');
    var name = item.find('.name').text();
    var id = item.find('.id').text();

    $('#template').val(name);
    $('#templateid').val(id);
    $('#templateDialog').dialog('close');
});

Все это работает нормально. Проблема, с которой я сейчас сталкиваюсь - это проверка с использованием jQuery Validation . Поскольку скрытый ввод имеет класс required, при попытке отправить форму без выбора шаблона сообщение об ошибке отображается правильно. Однако текстовое поле template не имеет стиля. Я хотел бы получить класс invalid.

У меня вопрос , как мне настроить jQuery таким образом, чтобы, если скрытое поле templateid было недействительным, текстовое поле template также недопустимо, а если оно допустимо, текстовое поле действует также?

Обновление: вот картинка:

http://img577.imageshack.us/img577/8121/testckl.jpg

Посмотрите, как текстовое поле Подтверждение пароля имеет красный контур, а текстовое поле Template - нет? Я бы тоже хотел, чтобы он был красным.

Answer 1

Плагин проверки jQuery предоставляет два обработчика для настройки визуального изменения ошибочных полей: highlight и unhighlight.

$(".selector").validate({
    highlight: function(element, errorClass, validClass) {

        if ([case of the input]) {
        // check here the case of you file input and add the errorClass to the file input or its container
        }
        else {
         // don't forget to apply the class to element in the other cases as defining this handler will remove the default behavior
            $(element).removeClass(validClass).addClass(errorClass);
        }
     }
});

Сделайте обратное с незадействующим обработчиком.Надеюсь, это поможет, д.

Answer 2

Вы можете вызвать функцию для события Invalid.

$(".selector").validate({
   invalidHandler: function(form) {
    // do other stuff for a invalidvalid form

   }
})

см. this