Как проверить значения выпадающего списка jQuery UI с плагином проверки jQuery?

Question

Я добавил в форму комбинированный список jQuery UI с удаленным источником.Теперь я пытаюсь проверить это с помощью jQuery Validation Plugin (разрешены только значения из списка, поле является обязательным).

Я пробовал стандартный подход:

 $("#myform").validate({
    focusInvalid: false,
    focusCleanup: true,
    rules: {
      cbCountry: { // combobox
        required: true
      }

Но все жепустые значения допускаются.Что я делаю не так?

Обновление : я пытался следовать приведенному ниже совету @ Mike_Laird и обнаружил, что мой пользовательский метод

$.validator.addMethod('validComboboxValue', function (value) {
},
...

даже нетвызывается при применении к списку задач jQuery UI.Но когда я назначаю тот же метод стандартному вводу текста, он вызывается.

Answer 1

validate.js требует "имя" в теге, когда вы используете комбинированный список автозаполнения jqueryui. Сгенерированный код не имеет атрибутов id и name, поэтому их необходимо добавлять по мере необходимости.

В функции _create для выпадающего списка вам необходимо добавить:

select = this.element.hide(),
select_id = select.attr('id'),
selected = select.children(":selected"),

и

input = $("<input>")
.attr('id', select_id + '_combobox')
.attr('name', select_id + '_combobox')
.appendTo(wrapper)

Такой, учитывая HTML, вот так:

<select id="dropDownlist">
  <option...
</select>

autocomplete-combobox сгенерирует необходимый элемент input с атрибутами id и name, установленными в dropDownlist_combobox

с этим у меня есть полный контроль над этим автоматически сгенерированным тегом htmls из jqueryui-autocomplete-combobox Затем вы можете применить правила проверки к элементу input (dropDownlist-combobox) Это будет выглядеть примерно так:

$('#dropDownlist_combobox').rules('add', {
    required: true,
    messages: {
        required: 'Please enter your combobox'
    }
});

и вуаля:)

Однако при этом вы получите сообщение об ошибке, отображаемое между тегом input и кнопкой «выпадающий список». Чтобы это исправить, вам понадобится дополнительный код:

$.validator.setDefaults({
    errorPlacement: function (error, element) {
        if (element.context.id.indexOf('_combobox') == -1)
            error.insertAfter(element);
        else
            error.appendTo(element.parent());
    }
});

Весь код для примера доступен на http://jsfiddle.net/XhU78/

Я надеюсь, что работает для вас:)

Answer 2

Я вижу два вопроса здесь. Первое - вы должны использовать имя элемента, а не идентификатор. Второе: если я правильно понимаю - вы думаете, что допускаете пустые значения <select>, но это не так. Выбор автоматически заполняется после автозаполнения, но когда вы передаете пустое значение в <input id="acId"> (например, удаляете контент и нажимаете ESC), изменение не распространяется на <select>, в котором хранится контент, назначенный до очистки <input id="acId">.

Короче говоря - вы должны либо проверять не в select, но автоматически создавать ввод, либо распространять какое-либо пустое значение для выбора.

Используя вашу скрипку, я проверил первый подход: http://jsfiddle.net/RRH6t/1/

//changes made

//HTML:
<select id="cbCity" name="cbCityName" style="display:none">

//JS:
var input = this.input = $('<input id="acId" name="acName">')
...
$("#fAddTeacher").validate({
    debug : true,            // for debugging
    rules: {
        cbCityName: {
            required: true
        },
        acName : {
            required : true
        }
    }
});

Answer 3

Основная идея состоит в том, чтобы установить значения для каждого из параметров выбора, а затем написать собственный метод проверки для проверки значений параметров.Что-то вроде следующего пользовательского метода сделает выбор только из необходимого выпадающего списка.

jQuery.validator.addMethod(
"selectComboboxCheck",
function (value, element)
    {
    if (element.value === "0") {return false;}
    else return true;
    }
"Required - select an option."
);

Поместите class = "selectComboboxCheck" в тег выбора, чтобы вызвать этот метод.Выбранные параметры должны выглядеть примерно так:

<option value = "1">1</option>

Answer 4

Я знаю, что это старая тема, но мне просто нужно было сделать более или менее то же самое (хотя со статическим источником). Единственная проблема с проверкой значения выбора состоит в том, что плагин Validation отфильтровывает скрытые элементы, а код Combobox удобно скрывает исходный выбор. Однако ничто не мешает нам сказать Валидатору рассмотреть все элементы, даже скрытые:

$("#form").validate({
    ignore: ""
});

Ignore - селектор для отфильтровывания ненужных элементов и по умолчанию равен :hidden. Вы также можете указать это при вызове $.validator.setDefaults() и заставить его работать для любого экземпляра валидатора. Это работает при отправке формы с атрибутами required и min, возможно, потребуется больше усилий для выбора этой работы (например, запуск события focusout).

UPDATE

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

1. На самом деле необходим только атрибут required, а не min.
2. Код комбинированного списка необходимо изменить, чтобы принять опцию с пустым значением. Так как это всего лишь пример JQueryUI, это не должно быть проблемой.
3. Первый вариант выбора должен быть с пустым значением.
4. Пусть Combobox вызовет событие focusout при изменении состояния (autocompleteselect, _removeIfInvalid).

Answer 5

Просто добавьте новый пользовательский метод, подобный этому

jQuery.validator.addMethod("selectComboboxCheck",
        function (value, element)
            {
                if ($(element).find(":selected").val() == -1) {
                    return false; 
                }
                else return true;
            },
            "Required"
        );

и добавьте, создайте поле выбора следующим образом:

<select id="dropDownlist" class="selectComboboxCheck">
  <option value="-1">Select something</option>
  <option value="1">Car</option>
  <option value="2">Plane</option>
</select>

Теперь при выборе «Выбрать что-то» проверка не пройдети иначе так и будет.(протестировано с помощью jquery 1.9.1)