如何在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>

当用户尝试提交时，会收到验证错误：

但现在我想通过Javascript在“runtime”设置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 attribute is documented为Boolean：

  

4.10.7.3.4 required属性

     

required 属性为boolean attribute。指定时，元素是必需的。

关于如何定义boolean属性，有很多烦恼。 HTML5规范说明：

  

元素上存在布尔属性表示真值，缺少属性表示假值。

     

如果该属性存在，则其值必须是空字符串或者是属性规范名称的ASCII不区分大小写匹配的值，没有前导空格或尾随空格。

这意味着您可以通过两种不同的方式指定required 布尔属性：

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

但属性的价值是什么？

当您查看my jsFiddle of this problem时，您会注意到如果在标记中定义了required属性：

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

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

edName.attributes.required = [object Attr]

这可能会导致解决方案。

Answer 1

required是reflected property（例如id，name，type等等，所以：

element.required = true;

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

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

---

（只是为了完整。）

回复：

  

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

edName.attributes.required = [object Attr]

那是因为该代码中的required是属性对象，而不是字符串; attributes是NamedNodeMap，其值为Attr objects。要获得其中一个的值，您需要查看其value属性。但是对于布尔属性，该值不相关;该属性要么存在于地图中（true），要么不存在（false）。

因此，如果required 未被反映，您可以通过添加属性来设置它：

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

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

element.removeAttribute("required");

......相当于element.required = false。

但我们不必对required这样做，因为它已被反映出来。

Answer 2

短版

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设法指出reflected properties，我了解到以下语法错误：

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属性的定义规定只应将其设置为空字符串""以指示 true 。以下方法均适用于设置 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)
{
}

Answer 3

和jquery版本：

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

我知道这不是问题所在，但也许有人会觉得这很有用：）

Answer 4

重要的不是属性，而是属性，它的值是布尔值。

您可以使用

进行设置

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

Answer 5

let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
  formelem.required = true;

});

如果要输入所有内容，请输入文本区域并选择所需的元素。

Answer 6

尝试这个..

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