如何在Javascript中设置HTML5所需的属性？

 

我想标记text作为在Javascript 所需的输入框。 

<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 布尔属性： 

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.required = true;

...其中element是实际的input DOM元素，例如： 

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

（只是为了完整性。）

回覆：

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

edName.attributes.required = [object Attr]

这是因为在该代码中required是属性对象，而不是字符串; attributes是一个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

长版本

一旦TJ Crowder设法指出反射属性，我知道以下语法是错误的 ： 

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

从概念上讲，正确的想法（用类型化语言表达）是： 

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!

    测试案例

    这导致围绕使用required属性进行测试，比较通过属性返回的值和反射属性 

    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的正确方法是什么？ 您有两个选择，无论是反射属性，还是通过正确设置属性： 

    element.setAttribute("required", "");         //Correct
edName.required = true;                       //Correct

    严格来说，任何其他值都会“设置”属性。 但是Boolean属性的定义决定了它只能设置为空字符串""来表示真。 以下方法都可以设置 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!

    使用反射的.required属性时，还可以使用任何“falsey”值将其关闭，并使用truthy值将其打开。 但为了清晰起见，只需坚持真假。

    如何检查required ？

    通过.hasAttribute("required")方法检查属性的存在性： 

    if (edName.hasAttribute("required")
{
}

    您也可以通过布尔反射的.required属性来检查它： 

    if (edName.required)
{
}

    和jquery版本： 

    $('input').attr('required', true)
$('input').attr('required', false)

    我知道这不是问题，但也许有人会发现这有助于:)

    链接地址: http://www.djcxy.com/p/56093.html

    上一篇: How to set HTML5 required attribute in Javascript?

    下一篇: Required attribute on multiple checkboxes with the same name?