我正在尝试在 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>
当用户尝试提交时，他们会收到验证错误：
但现在我想通过 Javascript 在“运行时”设置 required 属性：
<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"] = "";
除非我现在提交，否则没有验证检查，没有阻止。
设置 HTML5 验证布尔属性的正确方法是什么？
jsFiddle
HTML5 验证 required 属性记录为 Boolean：
4.10.7.3.4
required属性
required属性是一个布尔属性。指定后，该元素是必需的。
关于如何定义 boolean 属性，有很多令人烦恼的事情。 HTML5 规范注释：
元素上存在布尔属性表示真值，不存在该属性表示假值。
如果该属性存在，则其值必须是空字符串或与该属性的规范名称匹配的 ASCII 不区分大小写的值，并且没有前导或尾随空格。
这意味着您可以通过两种不同的方式指定 required boolean 属性：
edName.attributes.required = ""; //the empty string edName.attributes.required = "required"; //the attribute's canonical name
当你查看我的 jsFiddle 的这个问题时，你会注意到如果 required 属性在标记中定义：
<input id="edName" type="text" id="name" required>
那么属性的值不是空字符串，也不是属性的规范名称：
edName.attributes.required = [object Attr]
这可能会带来解决方案。
required是一个反射属性 （例如id、name、type等），因此：...其中
element是实际的inputDOM 元素，例如：document.getElementById("edName").required = true;（只是为了完整性。）
回复：
那是因为该代码中的
required是一个属性对象，而不是字符串；属性是NamedNodeMap 其值为Attr代码>对象。要获取其中之一的值，您需要查看其value属性。但对于布尔属性，该值不相关；该属性要么存在于地图中（true），要么不存在（false）。因此，如果
required未反映出来，您可以通过添加属性来设置它：element.setAttribute("required", "");...相当于
element.required = true。您可以通过完全删除它来清除它：element.removeAttribute("required");...相当于
element.required = false。但我们不必对
required这样做，因为它已被反映。简短版本
element.setAttribute("required", ""); //turns required on element.required = true; //turns required on through reflected attribute jQuery(element).attr('required', ''); //turns required on $("#elementId").attr('required', ''); //turns required on element.removeAttribute("required"); //turns required off element.required = false; //turns required off through reflected attribute jQuery(element).removeAttr('required'); //turns required off $("#elementId").removeAttr('required'); //turns required off if (edName.hasAttribute("required")) { } //check if required if (edName.required) { } //check if required using reflected attribute长版
一旦 T.J. Crowder 设法指出反映的属性，我了解到以下语法错误：
您必须通过
element.getAttribute和element.setAttribute：element.getAttribute("foo"); //correct element.setAttribute("foo", "test"); //correct这是因为该属性实际上包含一个特殊的 HtmlAttribute 对象：
通过将属性值设置为“true”，您错误地将其设置为 String 对象，而不是它所需的 HtmlAttribute 对象：
element.attributes["foo"] = "true"; //error because "true" is not a HtmlAttribute object element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object从概念上讲，正确的想法（用类型语言表达）是：
这就是原因：
getAttribute(名称)setAttribute(名称, 值)存在。他们负责将值分配给内部的 HtmlAttribute 对象。
除此之外，还反映了一些属性。这意味着您可以通过 Javascript 更好地访问它们：
//Set the required attribute //element.setAttribute("required", ""); element.required = true; //Check the attribute //if (element.getAttribute("required")) {...} if (element.required) {...} //Remove the required attribute //element.removeAttribute("required"); element.required = false;您不想要做的是错误地使用
.attributes集合：element.attributes.required = true; //WRONG! if (element.attributes.required) {...} //WRONG! element.attributes.required = false; //WRONG!测试用例
这导致围绕
required属性的使用进行测试，比较通过该属性返回的值和反映的属性document.getElementById("name").required; document.getElementById("name").getAttribute("required");结果：
HTML .required .getAttribute("required") ========================== =============== ========================= false (Boolean) null (Object) true (Boolean) "" (String) true (Boolean) "" (String) true (Boolean) "required" (String) true (Boolean) "true" (String) true (Boolean) "false" (String) true (Boolean) "0" (String)尝试直接访问
.attributes集合是错误的。它返回代表 DOM 属性的对象：这解释了为什么您永远不应该直接与
.attributes收集对话。您不是在操纵属性的值，而是操纵代表属性本身的对象。如何设置必填？
在属性上设置
required的正确方法是什么？您有两种选择，要么是反映的属性，要么是通过正确设置属性：element.setAttribute("required", ""); //Correct element.required = true; //Correct严格来说，任何其他值都会“设置”该属性。但
Boolean属性的定义规定，只能将其设置为空字符串""来指示 true。以下方法都可以设置requiredBoolean属性，但是不要使用它们：
element.setAttribute("required", "required"); //valid, but not preferred element.setAttribute("required", "foo"); //works, but silly element.setAttribute("required", "true"); //Works, but don't do it, because: element.setAttribute("required", "false"); //also sets required boolean to true element.setAttribute("required", false); //also sets required boolean to true element.setAttribute("required", 0); //also sets required boolean to true我们已经了解到尝试直接设置属性是错误的：
如何清除必填项？
尝试删除
required属性时的技巧是很容易意外打开它：edName.removeAttribute("required"); //Correct edName.required = false; //Correct无效的方法：
edName.setAttribute("required", null); //WRONG! Actually turns required on! edName.setAttribute("required", ""); //WRONG! Actually turns required on! edName.setAttribute("required", "false"); //WRONG! Actually turns required on! edName.setAttribute("required", false); //WRONG! Actually turns required on! edName.setAttribute("required", 0); //WRONG! Actually turns required on!使用反射的
.required属性时，您还可以使用任何“falsey”值将其关闭，并使用 true 值将其打开。但为了清楚起见，请坚持正确和错误。如何检查是否有
必需？通过
.hasAttribute("required")方法检查属性是否存在：if (edName.hasAttribute("required")) { }您还可以通过 Boolean 反映的
.required属性进行检查：if (edName.required) { }