質問

をマークしようとしています。 text として入力ボックスに 必須 をJavascriptで入力します。

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

もしフィールドが初期状態で required :

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

ユーザが送信しようとすると、バリデーションエラーが表示されます。

しかし、今度は required 属性を 実行時に設定したいのです。 を、Javascriptを通して指定します。

<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 の仕様にはこう記されています。

要素にブーリアン属性がある場合は真の値を表し、ない場合は偽の値を表します。

属性が存在する場合、その値は空文字列か、属性の正規名と大文字小文字を区別せずに一致する値でなければならず、先頭や末尾に空白は許されません。

これはつまり、属性に required ブーリアン 属性を2種類の方法で指定することができます。

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]

解決につながるかもしれません。

どのように解決するのですか？

ショートバージョン

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"にすることで、誤って 文字列 オブジェクトではなく 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を設定するには？

を設定する正しい方法は何ですか？ required を属性に設定する正しい方法は何ですか？2つの選択肢があります。 プロパティ を反映させるか、または属性を正しく設定することです。

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

厳密に言えば、他のどのような値でもその属性を設定します。しかし Boolean 属性の定義では、空の文字列である "" を示すために 真 . 以下のメソッドはすべて を設定します。 は 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 プロパティを使用する場合、任意の "ファルシー"です。 の値を使用してオフにし、真偽の値を使用してオンにすることができます。しかし、わかりやすくするために、trueとfalseにこだわってください。

操作方法 を確認する について required ?

属性があるかどうかを .hasAttribute("required") メソッドで確認します。

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

を通して確認することもできます。 ブーリアン 反映される .required プロパティを使用します。

if (edName.required)
{
}