Wie legt man das erforderliche Attribut von HTML5 mithilfe von Javascript fest?

Question

Ich versuche, das text Eingabefeld in Javascript als erforderlich zu markieren.

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

Wenn das Feld ursprünglich mit required markiert war:

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

Wenn Benutzer versuchen, etwas einzureichen, erhalten sie einen Validierungsfehler:

Aber jetzt möchte ich die required-Eigenschaft per Javascript auf „Runtime“ setzen:

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

Verwenden Sie das entsprechende Skript:

//recommended W3C HTML5 syntax for boolean attributes
document.getElementById("edName").attributes["required"] = "";

Keine Validierungsprüfungen, keine Blockierung, es sei denn, ich sende es jetzt ab.

Was ist der richtige Weg, um HTML5-Validierungs-Boolesche Attribute einzurichten?

jsFiddle

Was ist der Wert dieses Attributs, fragen Sie?

HTML5-Validierung required 属性记录为 Boolean Attribute dokumentiert als Boolean:

4.10.7.3.4 required Eigenschaften

Die Eigenschaft

required ist eine boolesche Eigenschaft. Wenn angegeben, ist dieses Element erforderlich.

Es gibt viele lästige Dinge bei der Definition von boolean Eigenschaften. Kommentare zur HTML5-Spezifikation:

Das Vorhandensein eines booleschen Attributs im

-Element stellt einen wahren Wert dar, und das Fehlen dieses Attributs stellt einen falschen Wert dar.

Wenn das Attribut vorhanden ist, muss sein Wert eine leere Zeichenfolge oder ein ASCII-Wert sein, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird und der mit dem kanonischen Namen des Attributs übereinstimmt und keine führenden oder nachgestellten Leerzeichen enthält.

Das bedeutet, dass Sie required boolesche Eigenschaften auf zwei verschiedene Arten angeben können:

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

Aber welchen Wert hat das Attribut eigentlich ?

Wenn Sie sich meine jsFiddle für diese Frage ansehen, werden Sie feststellen, dass, wenn das Attribut required im Markup definiert ist:

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

Dann ist der Wert des Attributs weder eine leere Zeichenfolge, noch ist es der kanonische Name des Attributs:

edName.attributes.required = [object Attr]

Dies könnte zu einer Lösung führen.

Answer 1

required 是一个反射属性 （例如 id、name、type 等），因此：

element.required = true;

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

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

---

（只是为了完整性。）

回复：

那是因为该代码中的 required 是一个属性对象，而不是字符串； 属性是NamedNodeMap 其值为 Attr代码>对象。要获取其中之一的值，您需要查看其 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 设法指出反映的属性，我了解到以下语法错误：

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(名称)
• setAttribute(名称, 值)

存在。他们负责将值分配给内部的 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")
==========================   ===============  =========================
                      false (Boolean)  null (Object)
             true  (Boolean)  "" (String)
          true  (Boolean)  "" (String)
  true  (Boolean)  "required" (String)
      true  (Boolean)  "true" (String)
     true  (Boolean)  "false" (String)
         true  (Boolean)  "0" (String)

尝试直接访问.attributes集合是错误的。它返回代表 DOM 属性的对象：

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

这解释了为什么您永远不应该直接与 .attributes 收集对话。您不是在操纵属性的值，而是操纵代表属性本身的对象。

如何设置必填？

在属性上设置 required 的正确方法是什么？您有两种选择，要么是反映的属性，要么是通过正确设置属性：

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

严格来说，任何其他值都会“设置”该属性。但 Boolean 属性的定义规定，只能将其设置为空字符串 "" 来指示 true。以下方法都可以设置requiredBoolean属性，

但是不要使用它们：

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”值将其关闭，并使用 true 值将其打开。但为了清楚起见，请坚持正确和错误。

如何检查是否有必需？

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

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

您还可以通过 Boolean 反映的 .required 属性进行检查：

if (edName.required)
{
}