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属性は、Boolean次のように文書化されています。

4.10.7.3.4 required属性

required属性があるブール属性。指定する場合、要素は必須です。

boolean属性を定義する方法については、多くの手書きがあります。HTML5仕様のメモ：

要素にブール属性が存在することは真の値を表し、属性が存在しないことは偽の値を表します。

属性が存在する場合、その値は、空の文字列か、属性の正規名と大文字小文字を区別せずにASCIIで、先頭または末尾に空白を含まない値である必要があります。

これは、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]

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

requiredで反射されたプロパティは、（のようなid、name、type、など）、そう：

element.required = true;

... element実際のinputDOM要素はどこにあるか。例：

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

（完全を期すためです。）

Re：

次に、属性の値は空の文字列でも、属性の正規名でもありません。

edName.attributes.required = [object Attr]

それrequiredは、そのコードでは文字列ではなく属性オブジェクトだからです。attributesでNamedNodeMap、その値があるAttrオブジェクトが。それらの1つの値を取得するには、そのvalueプロパティを確認します。ただし、ブール属性の場合、値は関係ありません。属性はマップに存在する（true）または存在しない（false）のいずれかです。

したがって、反映さrequired れない場合は、属性を追加して設定します。

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

...これはと同等ですelement.required = true。あなたはそれを完全に取り除くことによってそれをクリアするでしょう：

element.removeAttribute("required");

...これはと同等ですelement.required = false。

ただしrequired、反映されているため、でこれを行う必要はありません。

短縮版

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

ロングバージョン

TJ 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オブジェクトではなく、誤ってStringオブジェクトに設定されます。

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属性を設定する正しい方法は何ですか？反映されるプロパティ、または属性を正しく設定することにより、2つの選択肢があります。

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

厳密に言えば、他の値は属性を「設定」します。ただし、Boolean属性の定義で""は、trueを示すには空の文字列にのみ設定する必要があると規定されています。次のメソッドはすべてブール属性を設定するために機能し、 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の特性を、あなたはまた、任意の使用することができます「falsey」それをオフにする値を、そしてtruthy値は、それをオンにします。ただし、明確にするために、trueとfalseに固執してください。

確認方法はrequired？

.hasAttribute("required")メソッドを通じて属性の存在を確認します。

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

ブール反射.requiredプロパティを使用して確認することもでき ます。

if (edName.required)
{
}

重要なのは属性ではなくプロパティであり、その値はブール値です。

次を使用して設定できます

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

そしてjqueryバージョン：

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

私はそれが問題を超えていることを知っていますが、多分誰かがこれが役立つと思うでしょう:)

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

});

すべての入力、textarea、select要素を必要とする場合。

これを試して

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