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

Posted 2023-02-22

【中文标题】如何在 Javascript 中设置 HTML5 必需属性？

【英文标题】：How to set HTML5 required attribute in Javascript?

【发布时间】：2013-09-17 04:48:10

【问题描述】：

我正在尝试在 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 boolean 属性：

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]

这可能会导致解决方案。

【问题讨论】：

我不明白他们为什么不允许required="false"，他们有没有在写标准之前写过模板？条件属性通常很痛苦，将布尔值放在属性值中会更容易......

是否可以手动显示所需输入的文本：“请填写此字段。”？

【参考方案1】：

短版

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 Boolean 属性，

但不要使用它们：

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” 值将其关闭，并使用真值将其打开。但为了清楚起见，请坚持真假。

如何检查required？

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

if (edName.hasAttribute("required"))

也可以通过Boolean反映.required属性查看：

if (edName.required)

【讨论】：

变量element和edName有什么区别？

一个是我忘记将特定元素名称edName（即名称输入框）转换为通用element。

"您必须通过element.getAttribute和element.setAttribute:"为了清楚起见，您可以使用attributes NamedNodeMap如果您知道该属性已经存在，则要更改该属性的值，您只是不能使用它来添加不存在的属性（或删除存在的属性）。所以这种方法对于像required 这样的布尔属性没有用，因为对它们来说重要的是它们是否存在，而不是它们的价值是什么。但是，是的，反射属性通常更容易。 :-)

【参考方案2】：

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

);

如果您希望所有 input、textarea 和 select 元素都是必需的。

【参考方案3】：

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 这样做，因为它已被反映。

【讨论】：

你能在这里添加一些关于 .prop 的内容吗？

@mplungjan - 我不确定你的意思......？ jQuery?

是的，因为 prod 在 DOM 中不起作用会让人困惑

【参考方案4】：

还有jquery版本：

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

我知道这不是问题，但也许有人会觉得这很有帮助:)

【讨论】：

实际上，使用prop() 而不是attr() :)

@PierreDuc 现在是 2019 年 .. 我们不再使用 :)

@a20 上次我检查时，我还在使用它。所以，我猜你错了

我在和我兄弟开玩笑......对不起！

【参考方案5】：

试试这个..

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

【参考方案6】：

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

你可以设置它使用

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