JQuery валидатор с выберите не работает

Question

Я только начал работать с плагином jquery validate, но не смог заставить его работать так, как ожидалось.

У меня есть пример на Fiddle, расположенный в http://jsfiddle.net/GWABv/3/

Может кто-нибудь сказать мне, какого черта я делаю неправильно? Я просто пытаюсь потребовать, чтобы пользователь выбрал опцию в раскрывающемся списке, но даже если я не выбрал значение, он возвращается, говоря, что форма верна.

HTML:

<form id="roadForm" method="get" action="">
    <p>
        <label for="editRoad_ProjectClassification">
            <em class="red">*</em> Project Classification:
        </label>
        <select id="editRoad_ProjectClassification" name="editRoad_ProjectClassification"  title="Please select something!" validate="required:true">
            <option value="">Please select</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </p>
</form>
<label class="FUNC_saveRecord">
    <span class="icon iconSave"></span>
    <span class="title">Save</span>
</label>

JavaScript:

$('.FUNC_saveRecord').click(function() {
    saveRecord();
});


function saveRecord() {
    var roadFormValidator = $('#roadForm').validate();
    if (!roadFormValidator.valid()) {
        roadFormValidator.showErrors();
    }
    else {
        alert('form is valid');
    }
}

Answer 1

У вас есть несколько проблем:

1. form написано с ошибкой в ​​открывающем теге (<focm>) Похоже, это было исправлено
2. Вам необходимо добавить атрибут class='required' в поле.validate=required:true этого не сделает.
3. Вам не нужно звонить validate каждый раз, когда происходит click.Достаточно просто вызвать его один раз на document.ready.
4. В этом случае нет необходимости вручную вызывать showErrors.Плагин сделает это за вас автоматически.

Вот как я бы обновил ваш код:

HTML:

<form id="roadForm" method="get" action="">
<p>
    <label for="editRoad_ProjectClassification">
        <em class="red">*</em> Project Classification:
    </label>
    <select id="editRoad_ProjectClassification" name="editRoad_ProjectClassification"  title="Please select something!" class="required">
        <option value="">Please select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</p>
</form>
<label class="FUNC_saveRecord">
    <span class="icon iconSave"></span><span class="title">Save</span>
</label>

JavaScript:

$("#roadForm").validate();

$('.FUNC_saveRecord').click(function() {
    saveRecord();
});


function saveRecord() {
    var roadFormValidator = $('#roadForm');
    if (roadFormValidator.valid()) {
        alert('form is valid');
    }
}

Обновленный пример: http://jsfiddle.net/hRjJM/