如何在Javascript中设置HTML5所需的属性？
我试图在Javascript中标记一个textinput框。
<input id="edName" type="text" id="name">
如果该字段最初标记为required ：
<form> <input id="edName" type="text" id="name" required><br> <input type="submit" value="Search"> </form>
当用户试图提交时，他们被给出一个validation错误：
但是现在我想通过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"] = "";
除了现在提交，没有validation检查，没有阻止。
什么是设置HTML5validation布尔属性的正确方法？
的jsfiddle
你问这个属性的价值是什么？
HTML5validationrequired属性被logging为Boolean ：
4.10.7.3.4
required属性
required属性是一个布尔属性 。 指定时，元素是必需的。
关于如何定义一个boolean属性有很多关于手的问题。 HTML5规范注意到：
元素上布尔属性的存在表示真值，缺less属性表示假值。
如果该属性存在，则其值必须是空string，或者是该属性规范名称的ASCII不区分大小写的匹配值，且不包含前导或尾随空格。
这意味着你可以用两种不同的方式指定一个required 布尔属性：
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>
那么属性的值不是空string，也不是属性的规范名称：
edName.attributes.required = [object Attr]
这可能会导致一个解决scheme。
required是一个reflection的属性 （如id ， name ， type等），所以：
element.required = true;
…其中element是实际的input DOM元素，例如：
document.getElementById("edName").required = true;
（为了完整性）
回覆：
那么属性的值不是空string，也不是属性的规范名称：
edName.attributes.required = [object Attr]
这是因为在该代码中required是一个属性对象 ，而不是一个string; attributes是一个NamedNodeMap其值是Attr对象 。 为了获得其中一个的价值，你可以看看它的value属性。 但是对于一个布尔属性，值是不相关的; 该属性存在于地图中（true）或不存在（false）。
所以如果required 不反映，你可以通过添加属性来设置它：
element.setAttribute("required", "");
…这相当于element.required = true 。 您可以通过完全删除它来清除它：
element.removeAttribute("required");
…这是element.required = false的等价物。
但是我们不需要这样做，因为它被反映出来。
简洁版本
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
长版本
一旦TJ Crowder设法指出reflection的属性 ，我知道下面的语法是错误的 ：
element.attributes["name"] = value; //bad! Overwrites the HtmlAttribute object element.attributes.name = value; //bad! Overwrites the HtmlAttribute object value = element.attributes.name; //bad! Returns the HtmlAttribute object, not its value value = element.attributes["name"]; //bad! Returns the HtmlAttribute object, not its value
你必须经过element.getAttribute和element.setAttribute ：
element.getAttribute("foo"); //correct element.setAttribute("foo", "test"); //correct
这是因为该属性实际上包含一个特殊的HtmlAttribute对象：
element.attributes["foo"]; //returns HtmlAttribute object, not the value of the attribute element.attributes.foo; //returns HtmlAttribute object, not the value of the attribute
通过设置一个属性值为“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
从概念上讲，正确的想法（以types化语言expression）是：
HtmlAttribute attribute = new HtmlAttribute(); attribute.value = ""; element.attributes["required"] = attribute;
这就是为什么：
-
getAttribute(name) -
setAttribute(name, value)
存在。 他们完成将值分配给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!
testing案例
这导致围绕使用required属性进行testing，比较通过属性返回的值和reflection的属性
document.getElementById("name").required; document.getElementById("name").getAttribute("required");
结果：
HTML .required .getAttribute("required") ========================== =============== ========================= <input> false (Boolean) null (Object) <input required> true (Boolean) "" (String) <input required=""> true (Boolean) "" (String) <input required="required"> true (Boolean) "required" (String) <input required="true"> true (Boolean) "true" (String) <input required="false"> true (Boolean) "false" (String) <input required="0"> true (Boolean) "0" (String)
试图直接访问.attributes集合是错误的。 它返回表示DOM属性的对象：
edName.attributes["required"] => [object Attr] edName.attributes.required => [object Attr]
这就解释了为什么你不应该直接与.attributes收集。 您不是在操纵属性的值 ，而是在表示属性本身的对象。
如何设置所需？
什么是正确的方式来设置required的属性？ 你有两个select，无论是reflection属性 ，或通过正确设置属性：
element.setAttribute("required", ""); //Correct edName.required = true; //Correct
严格来说，任何其他的值都会“设置”属性。 但Boolean属性的定义决定了它只能设置为空string""来表示真 。 以下方法全部用于设置 required 布尔属性，
但不要使用它们：
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
我们已经知道直接设置属性是错误的：
edName.attributes["required"] = true; //wrong edName.attributes["required"] = ""; //wrong edName.attributes["required"] = "required"; //wrong edName.attributes.required = true; //wrong edName.attributes.required = ""; //wrong edName.attributes.required = "required"; //wrong
如何清除所需？
试图删除 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!
当使用reflection的.required属性时，也可以使用任何“falsey”值来closures它，并使用truthy值来打开它。 但是为了清楚起见，只要坚持真假。
如何检查 required ？
通过.hasAttribute("required")方法检查属性的存在性：
if (edName.hasAttribute("required") { }
您也可以通过布尔reflection的.required属性来检查它：
if (edName.required) { }
和jQuery的版本：
$('input').attr('required', true) $('input').attr('required', false)
我知道这是超出了问题，但也许有人会觉得这有帮助:)
重要的不是属性，而是属性 ，它的价值是一个布尔值。
你可以使用它来设置它
document.getElementById("edName").required = true;
试试这个..
document.getElementById("edName").required = true;
