Javascript で HTML5 の必須属性を設定するにはどうすればいいですか? 質問する

Javascript で HTML5 の必須属性を設定するにはどうすればいいですか? 質問する

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.4required属性

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

属性をどのように定義するかについては多くの議論がありますboolean。HTML5 仕様では次のように述べられています。

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

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

つまり、required ブール値2つの異なる方法で属性付けします。

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

しかし、属性の価値は何でしょうか本当に?

見るとこの問題の私のjsFiddlerequired属性がマークアップで定義されている場合、次のことがわかります。

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

属性の値はない空の文字列、または属性の正規名ではありません。

edName.attributes.required = [object Attr]

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

ベストアンサー1

required反映されたプロパティ( id、、、nameなどtype)、したがって、

element.required = true;

...element実際のinputDOM 要素はどこにありますか。例:

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

(完全を期すため)

返信:

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

edName.attributes.required = [object Attr]

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

だからもしrequired なかった反映するには、属性を追加して設定します。

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

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

element.removeAttribute("required");

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

requiredしかし、は反射されるため、そのようにする必要はありません。

おすすめ記事