如何在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的属性 (如idnametype等),所以:

 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.getAttributeelement.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;