javascriptからフィールドを無効にすることはできますか？

Question

this post私は、「無効な」入力値と「無効な」入力値の疑似クラスがあることを発見しました。

javascriptから入力フィールドを無効/有効としてマークする方法はありますか？あるいは、使用する検証方法を無効にすることはできますか？

Answer 1

javascriptから入力フィールドを無効/有効としてマークする方法はありますか？

実際の要素ではないため、実際のDOMには存在しないので、偽のクラスをJavaScriptでスタイルすることはできません。

バニラJavaScriptを使用すると、validation APIを使用します。

jQueryのではあなたは、単にこれを行うことができます

、 http://jsfiddle.net/elclanrs/Kak6S/

if ($input.is(':invalid')) { ... } 

または代わりに、私が使用する検証メソッドをオーバーライドすることができますか？

HTML5検証を使用している場合は、マークアップに固執してください。そうでなければ、$form.attr('novalidate', 'novalidate')でHTML5検証を無効にし、JSを使用してフィールドの検証を行い、必要に応じてvalidまたはinvalidクラスを追加することができます。私はa pluginを作って、このようにHTML5以外のブラウザをサポートするようにしました。

Answer 2

： DOMの「有効な」「無効な」属性を探していることが明らかになりました。

dom_object.setAttribute("isvalid", "true")を使用して各タグに属性を追加します。毎回これらの属性を更新する中央検証機能を使用することもできます（毎回dom_object.getAttribute("isvalid")を使用します）。

要素がフォーカスを失うたびに、またはいつでもこの関数を実行できます。

あまりエレガントではありませんが、残念ながらjavascriptとHTML5では「疑似」サポートはありません。

---

あなたの質問が分かっている場合は、JavaScriptを使用して検証を行うことができます。 しかし、クライアント側の検証、特にJavaScriptの検証を回避することは非常に簡単であることに注意してください。クライアントのデータを信頼してはならず、常にサーバー側でチェックする必要があります。

たとえば、ソースコードを調べて、document.getElementById('some_id').setAttribute('max', new_number)を実行して最大値（これはリンクのエントリの1つ）を変更すると、簡単に要素IDを見つけることができました。

さまざまな方法がありますので、私はあなたに一般的なイディオムを与えようとします。

document.getElementById('form_element_id').value（サーバーに送信されるnameと、JavaScriptで使用されるid）という形式を指定して値を取得できます。テキストエリアの場合は.innerHTMLを使用できます。

変数に値がある場合は、変数を確認するさまざまな方法があります。

たとえば、if (parseInt(my_value) < 0) //errorとすることができます。 正規表現を使用することもできますが、私はそれをすべて説明しませんが、ここからはhttp://www.w3schools.com/jsref/jsref_obj_regexp.aspから始めることができます。私はw3schoolsが最高のソースではないことを知っていますが、私はそれを始めるには大丈夫です。

ここで検証部分について：onsubmit="return validateForm()をフォームタグに追加します。ここで、validateForm（）はすべてのチェックを行う関数です。有効な場合はtrue、そうでない場合はfalseが返されます。このは、デフォルトの検証関数（デフォルトでは何もしません）を上書きします。

したがって、上記の例では、//errorはreturn falseに置き換えられます。あなたは他のこともすることができます。エラーを警告し、falseを返します。また、無効なフィールドを強調表示するためにjavascriptを使用することもできます（が入力フィールドを無効/有効なjavacriptとしてマークするかどうかわからない場合）

もちろん、すべてのフィールドは、特定のものが合格した場合にtrueを返します。繰り返しますが、これに頼るべきではありませんが、平均的な人を抑えるためには、簡単な解決策です。

Answer 3

この目的でcustomValidity関数を使用できます。

customValidityメッセージをフィールドに追加すると、無効になります。空の文字列としてメッセージを設定すると、もう一度有効になります（他の理由で無効な場合を除きます）。

field.setCustomValidity("Invalid field.");は、フィールドを無効にします。

field.setCustomValidity("");は、HTML5制約に失敗しない限り、フィールドを有効にします。