如何在JavaScript中设置HTML5必需属性？

Question

我试图按照JavaScript中的要求标记一个text输入框。

<input id="edName" type="text" id="name">

如果字段最初标记为required:

<form>
    <input id="edName" type="text" id="name" required><br>
    <input type="submit" value="Search">
</form>

当用户试图提交时，会给出一个验证错误：

<form>
    <input id="edName" type="text" id="name"><br>
    <input type="submit" value="Search">
</form>

//recommended W3C HTML5 syntax for boolean attributes
document.getElementById("edName").attributes["required"] = "";         

JSFiddle

HTML5验证Required属性被记录为Boolean:

required属性是一个布尔属性。当指定时，该元素是必需的。

edName.attributes.required = ""; //the empty string
edName.attributes.required = "required"; //the attribute's canonical name

<input id="edName" type="text" id="name" required>

则属性的值不是空字符串，也不是属性的规范名称：

edName.attributes.required = [object Attr]

可能会找到解决办法。

Answer 1

required是一个反射属性（如id、name、type等），因此：

element.required = true;

...其中元素是实际的输入DOM元素，例如：

document.getElementById("edName").required = true;

（为了完整起见。）

edName.attributes.required = [object Attr]

因此，如果没有反映required，则可以通过添加属性来设置它：

element.setAttribute("required", "");

...相当于元素。required=true。您可以通过完全删除它来清除它：

element.removeAttribute("required");

...相当于元素。required=false。