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

我试图在Javascript中将

文本

输入框标记为必需

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

当用户尝试提交时，会出现验证错误：

但是现在我想通过Javascript在“运行时”设置

required

属性：

<form>
    <input id="edName" type="text" id="name"><br>
    <input type="submit" value="Search">
</form>

//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;

除非我现在提交，没有验证检查，没有阻塞

设置HTML5验证布尔属性的正确方法是什么

你会问，属性的值是多少？ HTML5验证作为一个

布尔值
：

4.10.7.3.4属性
必需的属性是一个。指定时，元素是必需的

关于如何定义一个
布尔值
属性，有很多人绞尽脑汁。HTML5规范说明：

元素上存在布尔属性表示真值，不存在该属性表示假值

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

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

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

但是属性的值到底是什么呢？
查看时，您会注意到如果标记中定义了
required
属性：

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

这可能会导致一个解决方案。
重要的不是属性而是属性，它的值是布尔值

您可以使用

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

required
是一个（如
id
，
名称
，
类型
，等等），因此：

…其中
元素
是实际的
输入
DOM元素，例如：

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


（为了完整起见。）

关于：

那么属性的值既不是空字符串，也不是属性的规范名称：

edName.attributes.required = [object Attr]

edName.attributes.required = [object Attr]

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

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

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

这是因为
required
在该代码中是一个属性对象，而不是字符串<代码>属性
是一个值为。要获取其中一个的值，您需要查看其
值
属性。但对于布尔属性，该值不相关；该属性在映射中存在（true）或不存在（false）

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

edName.attributes.required = [object Attr]

edName.attributes.required = [object Attr]

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

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

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

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

element.removeAttribute("required");

…这相当于
element.required=false

但是我们不必使用
required
，因为它是反映出来的。
短版本
长版本
一旦T.J.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

必须执行
元素.getAttribute
和
元素.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”，您错误地将其设置为字符串对象，而不是它所需的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更好地访问它们：

<form>
    <input id="edName" type="text" id="name"><br>
    <input type="submit" value="Search">
</form>

//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
集合对话。您不是在操纵属性的值，而是在操纵表示属性本身的对象

如何设置必填项？
在属性上设置
required
的正确方法是什么？您有两种选择，一种是反射属性，另一种是通过正确设置属性：

edName.attributes.required = [object Attr]

edName.attributes.required = [object Attr]

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

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

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

严格来说，任何其他值都将“设置”该属性。但是
布尔
属性的定义规定，只应将其设置为空字符串
“
”以指示true。以下方法都可以设置
必需的
布尔属性

但是不要使用它们：

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!

使用reflected
.required
属性时，还可以使用任何“false”值将其关闭，使用truthy值将其打开。但为了清楚起见，请坚持正确和错误

如何检查是否需要
？
通过
.hasAttribute（“必需”）
方法检查属性是否存在：

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

您还可以通过布尔值反射
来检查它。必需的
属性：

if (edName.required)
{
}

试试这个

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

以及jquery版本：

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

我知道这是不可能的，但也许有人会觉得这很有帮助：）

如果您希望使所有输入、文本区域和选择元素都是必需的。
我不明白他们为什么不允许
required=“false”
，他们在编写标准之前是否编写过模板？条件属性通常是一个难题，将布尔值放在属性值中更容易…是否可以手动显示所需输入的文本