Проверка JQuery не работает на нескольких полях

Question

У меня есть страница с результатами поиска, в которой у меня есть поле поиска вверху страницы, а другое внизу.

Я использую плагин jQuery Validate (кстати, я очень новыйв jQuery), но я не уверен, что я делаю неправильно, так как он не работает с одной функцией, поэтому мне нужно создать две.

Вот мой HTML:

<div class="search-wrapper-large">
  <form id="top-search" method="GET" action="">
    <input name="topsearch" id="topsearch" class="largesearchfield" type="text">
    <button type="submit" title="Search">Search</button>
  </form>
</div>

<p>...search results...</p>

<div class="search-wrapper-large">
  <form id="bottom-search" method="GET" action="">
    <input name="bottomsearch" id="bottomsearch" class="largesearchfield" type="text">
    <button type="submit" title="Search">Search</button>
  </form>
</div>

Ивот мой jQuery:

//Search field validation
$('#top-search').validate({
    invalidHandler: $.watermark.showAll,    
    rules: {
        topsearch: { required: true, minlength: 3 }
    },
    messages: {
        topsearch: "Please enter a valid search term (at least 3 characters)."

    }           
});

$('#bottom-search').validate({
    invalidHandler: $.watermark.showAll,    
    rules: {        
        bottomsearch: { required: true, minlength: 3 }
    },
    messages: {
        bottomsearch: "Please enter a valid search term (at least 3 characters)."       
    }               
});

1. Есть ли способ иметь обе проверки в одной функции?
2. Нужно ли мне оборачивать оба поля в один элемент ?

Спасибо за любые советы по этому вопросу.

Answer 1

Вы можете назначить два элемента одним селектором, разделяя каждый идентификатор запятой Чтобы иметь отдельные метки вывода ошибок, jQuery Validate должен вызываться один раз для каждой формы.

Ваш метод инициализации частично неверен, поскольку опция 'messages' метода validate() ожидает объект с сообщением для каждого правила, а не одно сообщение, применяемое ко всем правилам.

Предполагая, что вы изменяете имя полей topsearch и bottomsearch на «term» (или любое другое совпадающее имя), вы можете сохранить параметр «options» jQuery Validate в переменной и затем просто вызвать validate() спеременная 'options' один раз для каждой формы.Следующий код должен работать:

var options = {
    invalidHandler: $.watermark.showAll,    
    rules: {        
        term: { 
            required: true, 
            minlength: 3 
        }
    },
    messages: {
        term:  {
            required: "Please enter a valid search term (at least 3 characters).",
            minlength: "Please enter a valid search term (at least 3 characters)."
        }       
    }               
};

$("#top-search").validate(options);
$("#bottom-search").validate(options);

Вот jsFiddle для вышеупомянутого минус неправильный обработчик: http://jsfiddle.net/C6LdW/