Javascriptを使用してHTML5の必須属性を設定するにはどうすればよいですか?

Question

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

リーリー

フィールドが元々 required:

とマークされていた場合 リーリー

ユーザーが送信しようとすると、検証エラーが発生します:

しかし、今度は Javascript を介して「実行時」に required プロパティを設定したいと思います:

リーリー

対応するスクリプトを使用します:

リーリー

今すぐ送信しない限り、検証チェックやブロックは行われません。

設定 HTML5 でブール属性 を検証する 正しい方法は何ですか?

jsフィドル

あなたが尋ねているこの属性の値は何ですか?

HTML5 検証

required Boolean: として記録される属性

4.10.7.3.4 必須 プロパティ

必須 プロパティはブール型プロパティです。指定する場合、この要素は必須です。

boolean プロパティの定義方法については、面倒なことがたくさんあります。 HTML5 仕様のコメント:

要素にブール属性が存在する場合は true 値を表し、この属性が存在しない場合は false 値を表します。

属性が存在する場合、その値は、属性の正規名と一致し、先頭または末尾にスペースがない空の文字列または ASCII 大文字と小文字を区別しない値である必要があります。

これは、

required boolean 属性を 2 つの異なる方法で指定できることを意味します: リーリー

しかし、属性

actually の値は何でしょうか?

この質問の jsFiddle を見ると、

required 属性がタグで定義されていることがわかります: リーリー

この場合、属性

の値は空の文字列 ではなく、属性の正規名でもありません: リーリー

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

Answer 1

required は reflective 属性 (例: id、name、type など)、それで： ＃＃＃ リーリー

...ここで、

element は実際の input DOM 要素です。例: リーリー

---

(完全を期すためです。)

＃＃＃返事：＃＃＃

これは、このコードの

required

は文字列ではなく

property オブジェクト であるためです。property は NamedNodeMap その値は Attrobject です。これらのいずれかの値を取得するには、その value代码> プロパティを確認する必要があります。ただし、ブール型プロパティの場合、値は無関係です。プロパティはマップ内に存在するか (true)、存在しないか (false) のいずれかです。 したがって、required

が 反映されていない場合は、属性を追加することで設定できます: リーリー ...element.required = true

と同等。完全に削除することでクリアできます:

リーリー ...element.required = false

と同等。

ただし、required

については既に反映されているため、これを行う必要はありません。

Answer 2

＃＃＃短縮版＃＃＃ リーリー

ロングバージョン

T.J. Crowder が

反映されたプロパティ

をなんとか指摘できたので、私は次の構文 error: を学びました。 リーリー

は element.getAttribute と element.setAttribute を渡す必要があります: リーリー これは、属性に実際には特別な HtmlAttribute オブジェクトが含まれているためです:

リーリー

属性値を「true」に設定すると、必要な HtmlAttribute オブジェクトではなく、誤って

String

オブジェクトに設定することになります。 リーリー 概念的に、正しい考え方 (型言語で表現) は次のとおりです: リーリー その理由は次のとおりです:

getAttribute(name)

• setAttribute(名前, 値)
• ＃＃＃存在する。これらは、内部 HtmlAttribute オブジェクトに値を割り当てる役割を果たします。 さらに、
いくつかの属性も反映されます

。これは、JavaScript 経由でより適切にアクセスできることを意味します:

リーリー

あなたが

したくないことは、.attributes コレクションを誤って使用することです:

リーリー ＃＃＃テストケース＃＃＃

これにより、required 属性の使用に関するテストが行​​われ、その属性を介して返された値と反映された属性が比較されます リーリー ＃＃＃結果：＃＃＃ リーリー

.attributes

コレクションに直接アクセスしようとするとエラーになります。 DOM プロパティを表すオブジェクトを返します:

リーリー

これは、.attributes コレクションに直接アクセスしてはいけない理由を説明しています。プロパティの

value

を操作しているのではなく、プロパティ自体を表すオブジェクトを操作しています。

必須フィールドを設定するにはどうすればよいですか? プロパティに

required

を設定する正しい方法は何ですか?プロパティを反映するか、プロパティを正しく設定するかの 2 つのオプションがあります。 リーリー 厳密に言えば、他の値はプロパティを「設定」します。ただし、Boolean プロパティの定義では、

true

を示すには空の文字列

""

にのみ設定できると記載されています。次のメソッドは、required

Boolean 属性を設定できます。 ただし、 は使用しないでください: リーリー プロパティを直接設定しようとするとエラーになることがわかりました: リーリー 必須フィールドを クリアするにはどうすればよいですか? TryRemove

required

属性を使用する際の注意点は、属性を誤って開いてしまう可能性があることです。 リーリー 無効なメソッド: リーリー

リフレクションの

.required

プロパティを使用する場合、「falsey」値を使用してオフにし、true 値を使用してオンにすることもできます。ただし、明確にするために、善悪に固執してください。

が

必須

かどうかを確認するにはどうすればよいですか? .hasAttribute("required") メソッドを通じて属性が存在するかどうかを確認します:

リーリー

Boolean

反映された .required プロパティを介して確認することもできます:

リーリー