Как я могу кросс-браузерно обнаруживать поля ввода с атрибутом «обязательный» в jQuery?

У меня возникла небольшая проблема с проверкой логического атрибута required в полях формы.

Я размечаю свои поля как таковые:

<label for="email">Email Address:</label>
<input value="" type="email" name="email" id="email" required />

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

Следующее работает только в Firefox (Gecko) $(':input[required=""]'), но ничего не возвращает в Webkit (Safari, Chrome).

С другой стороны, Webkit возвращает все обязательные поля, если я запускаю $(':input[required]') или $(':input[required="true"]'), но когда это выполняется через Gecko, он не возвращает обязательные поля.

Что я здесь делаю неправильно? В последний раз я проверял, что входной атрибут был просто required, а не required="required" и не required="true".

Есть ли лучший способ определить все необходимые поля с помощью javascript/jQuery?


forms html jquery attributes required
person Jannis    schedule 12.02.2011    source источник
comment
Обязательный не является допустимым атрибутом. Есть ли причина, по которой вы не используете вместо этого что-то вроде class="required"? Тогда захват элементов с помощью jQuery будет тривиальным: jQuery('input.required')   -  person Mark Eirich    schedule 12.02.2011
comment
required ЯВЛЯЕТСЯ допустимым атрибутом HTML5   -  person SpliFF    schedule 12.02.2011

Ответы (3)


arrow_upward
4
arrow_downward

Это может быть плохой обходной путь, но пробовали ли вы множественный селектор?

$(':input[required=""],:input[required]')
person mdrg    schedule 12.02.2011
comment
Да, это то, что я сейчас делаю в качестве обходного пути, я просто подумал, что для этого есть лучший способ :) Однако спасибо. - person Jannis; 12.02.2011
comment
@Jannis: только ввод является убийцей производительности, он будет искать каждый элемент в доме, чтобы найти поля ввода. - person Hussein; 13.02.2011

arrow_upward
3
arrow_downward

Ну вот. Это выведет массив со всеми необходимыми полями.

<input value="" type="email" name="email" id="email" required/>
<input value="" type="email" name="email1" id="email1"  required/>
<input value="" type="email" name="email2" id="email2"/>

<script type="text/javascript">
var x = $('input[required]').get();
console.log(x); // x will contain an array of required inputs [input#email, input#email1]
</script>
person Hussein    schedule 12.02.2011
comment
Спасибо, я могу подтвердить, что это работает, хотя в идеале я хотел бы продолжать использовать селектор :input, чтобы обнаруживались не только input, но и, например, textarea. Это также можно сделать или мне нужно будет проверять текстовые поля в качестве второго селектора $('input[required],textarea[required]').get(); ? - person Jannis; 12.02.2011
comment
@jannis Да, конечно, вы можете это сделать, разделяя элементы запятой. другой способ, который вы можете сделать, это назначить общий класс для всех полей, которые вы хотите включить, и просто указать элемент по имени класса, например: $('.class[required]') - person Hussein; 12.02.2011
comment
Спасибо за обновление, отличный способ найти эти поля, хотя лично я предпочитаю не использовать имена классов в качестве таких крючков, но это только я. Спасибо еще раз. - person Jannis; 12.02.2011

arrow_upward
0
arrow_downward

с бутстрапом 3 вы можете сделать:

$('input[required]')
    .closest(".form-group")
    .children("label")
    .append(" <i class='fa fa-asterisk'></i>");
person patie    schedule 20.03.2014