JavaScriptでHTML5必須属性を設定する方法は？

Question

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

<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属性を "runtime"に設定します。

<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"] = "";         

今すぐ送信する場合を除き、検証チェックやブロックはありません。

correctHTML5検証ブール属性（---）を設定するcorrect方法は何ですか？

jsFiddle

属性の値は何ですか？

HTML5検証 required属性が文書化されています としてBoolean：

4.10.7.3.4 required 属性

required属性は boolean属性 です。指定する場合、要素は必須です。

boolean属性の定義方法については、多くの手作業があります。 HTML5仕様ノート：

要素上のブール属性の存在は真の値を表し、属性の不在は偽の値を表します。

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

これは、requiredboolean属性を2つの異なる方法で指定できることを意味します。

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

しかし、属性の値は何ですかreally？

この問題の私のjsFiddle を見ると、マークアップでrequired属性が定義されていることに気付くでしょう：

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

その場合、属性の値はnot空の文字列でも、属性の正規名でもありません。

edName.attributes.required = [object Attr]

それは解決策につながる可能性があります。

Answer 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.クラウダーは 反映されたプロパティ を指摘することに成功し、次の構文がwrongであることを学びました。

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

mustelement.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オブジェクトに値を割り当てる作業を行います。

さらに、一部の属性はreflectedです。これは、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;

do n'tにしたいことは、誤って.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 collectと直接話をするべきではない理由を説明しています。属性の値を操作するのではなく、属性自体を表すオブジェクトを操作します。

必須の設定方法は？

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

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

厳密に言えば、他の値は属性を「設定」します。ただし、Boolean属性の定義では、trueを示すために空の文字列""にのみ設定する必要があります。次のメソッドはすべてsetrequiredBoolean属性に対して機能します。

しかし使用しないそれら：

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

clearが必要ですか？

required属性をremoveしようとするときのコツは、誤って有効にするのが簡単なことです：

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とfalseに固執するだけです。

requiredをcheckする方法は？

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

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

Boolean反映された.requiredプロパティで確認することもできます：

if (edName.required)
{
}

Answer 2

requiredは 反射プロパティ （id、name、typeなど）であるため、

element.required = true;

...ここでelementは実際のinput DOM要素です。例：

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

---

（完全を期すために。）

日時：

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

edName.attributes.required = [object Attr]

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

したがって、requiredwere n'tが反映されている場合は、属性を追加して設定します。

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

...これはelement.required = trueと同等です。完全に削除することでクリアできます。

element.removeAttribute("required");

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

ただし、requiredを使用する必要はありません。反映されているからです。

Answer 3

そして、jqueryバージョン：

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

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

Answer 4

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

を使用して設定できます

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

Answer 5

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

});

すべての入力、テキストエリア、および選択要素を必要とする場合。