JQuery проверить динамический массив ввода

Question

Как проверить <select> когда это динамический массив? Как это:

<select class="escolhaVidro id_material" name="id_material[]" id="id_material">

Уточнить: это <select> собирается динамически с помощью PHP, поэтому я не знаю, каковы индексы, поэтому этот способ не представляется возможным:

$(this).validate({
    rules: {
        "id_material[index]" : {
            required : true
        }
    }
});

И так странно, этот плагин не работает:

$(this).validate({
    rules: {
        id_material : {
            required : true
        }
    }
});

Я также пытался использовать CSS classrequired в <select>но ничего хорошего.

Answer 1

Цитата ОП: "И как ни странно этот плагин не работает:
$(this).validate({ ... });"

Это не странно. Это не работает, потому что вы ничего не нацелены. Там нет контекста или области для $(this) иметь какой-либо смысл.

Вы должны правильно нацелить свой <form> элемент:

например, id...

$('#myform').validate({ ... });

... или любым другим допустимым селектором jQuery, который нацелен на фактический <form></form> Вы хотите проверить.

---

Вот общий пример того, как проверить select Элемент, который вы можете легко адаптировать к вашей ситуации:

http://jsfiddle.net/Gy24q/

Важно, самый первый или по умолчанию option в select элемент должен содержать value="" или required Правило не удастся. Если по какой-либо причине вы не можете установить это первым option"s value равно "", затем посмотрите на обходной метод пользовательского метода этого ответа и jsFiddle.

HTML:

<form id="myform">
    <select name="id_material[]">
        <option value="">please choose...</option>
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>
    ....
</form>

Так как ваш nameсодержит скобки,[] Вы также должны заключить свое имя в кавычки:

JQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize plugin within DOM ready
        // other options,
        rules: {
            'id_material[]': {
                required: true
            }
        },
    });

});

---

Приведенный выше ответ предполагает, что вы знаете nameизselectэлемент. Однако, если вы не знаетеname, у вас есть пара вариантов...

1) Использованиеclass="required"внутриselectэлемент...

<select class="escolhaVidro id_material required" name="id_material[]" id="id_material">

Демо: http://jsfiddle.net/Gy24q/4/

2) Если правила более сложные, вы можете добавить соединение rulesна основе вашего существующего class назначения с использованиемrules('add') метод.

Используйте jQuery.each()если у вас есть более одногоselectэлемент, который нуждается в этом правиле...

// must be called after validate()
$('select.id_material').each(function () {
    $(this).rules('add', {
        required: true
    });
});

Демо: http://jsfiddle.net/Gy24q/10/

В противном случае это будет применять правилотолько к одному selectэлемент сclassid_material...

$('select.id_material').rules('add', {
    required: true
});

---

РЕДАКТИРОВАТЬ:

Цитировать ОП в комментариях:

Внутри функции выполняется следующая проверка: $('#formOrcamento').live('submit', function() {...});затем$(this).validate({...});относится к:$('#formOrcamento').validate ({...});

такой же как:

$('#formOrcamento').live('submit', function() {
    $(this).validate({ ... });
});

Да, именно поэтому он сломан.

.validate() вызывается только один раз на DOM, готовом инициализировать плагин. Вы не должны помещать это в submit обработчик. Плагин Validate уже имеет свой собственный встроенный обработчик событий, который фиксирует кнопку отправки формы.

Настройте свой код согласно моим рабочим демонстрациям jsFiddle выше.

---

РЕДАКТИРОВАТЬ 2:

Цитировать ОП в комментариях:

я использую jquery-ui и это добавляет к выбору следующее: style='display: none', Если я удалю через Firebug display: none, затем выберите проверку происходит и правильно отображает ошибку метки. Что может происходить?

Плагин Validate по умолчанию игнорирует скрытые элементы. Вам нужно будет отключить эту опцию, добавив ignore: [] в validate():

$(document).ready(function () {

    $('#myform').validate({
        ignore: [], // to allow validation of hidden elements
        // other options,
    });

});

Смотрите этот ответ для получения дополнительной информации.

Answer 2

Просто используйте скобки emtpy и убедитесь, что имя, включая скобки, заключено в кавычки (см. Документацию):

$(this).validate({
    rules: {
        "id_material[]" : {
            required : true
        }
    }
});