jquery - 如何跨浏览器检测 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) 中不返回任何内容。

另一方面，如果我运行$(':input[required]')或$(':input[required="true"]')，Webkit 返回所有必填字段，但是当它通过 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>");