Блог

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

 <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. Поскольку скрытый ввод имеет required класс, когда я пытаюсь отправить форму без выбора шаблона, сообщение об ошибке отображается правильно. Однако template текстовое поле не оформлено. Я бы хотел, чтобы он получил invalid класс.

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

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

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

Плагин проверки 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);
        }
     }
});
  

Сделайте наоборот с помощью обработчика unhighlight.

Надеюсь, это поможет, d.

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

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

   }
})
  

смотрите это