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

Question

У меня небольшая проблема с проверкой с логическим атрибутом 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?

Answer 1

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

$(':input[required=""],:input[required]')

Answer 2

Вот, пожалуйста. Это выведет массив со всеми обязательными полями.

<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>

Answer 3

с начальной загрузкой 3 вы можете сделать:

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