如何使用Javascript設定HTML5的required屬性？

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 在「運行時」設定 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 boolean 屬性：

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]

這可能會帶來解決方案。

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)
{
}