web-dev-qa-db-ja.com

JavaScriptから無効なフィールドをマークできますか?

この投稿 の読み取りから、「無効な」および「無効な」入力値の擬似クラスがあることがわかりました。

Javascriptから入力フィールドを無効/有効としてマークする方法はありますか?または、使用する検証方法をオーバーライドできますか?

61
Svish

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

CustomValidityメッセージをフィールドに追加すると、無効になります。メッセージを空の文字列として設定すると、メッセージは再び有効になります(他の理由で無効になっていない限り)。

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

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

116
dajavax

Edit:誰かが、DOMの「有効な」「無効な」属性を探していることを明確にしました。

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

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

正確ではありませんが、残念ながら、現在JavaScriptとHTML5での「疑似」サポートはありません。


あなたの質問を理解したら、Javascriptで検証を行うことができます。 ただし、クライアント側の検証、特にJavaScript検証を回避するのは非常に簡単であることに注意してください。クライアントデータを決して信用してはならず、常にサーバー側でチェックを行うべきです。

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

さまざまな方法がありますので、一般的なイディオムをお教えします。

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を使用して無効なフィールドを強調表示することもできます(これが「javascriptから入力フィールドを無効/有効としてマークすることで意味がわからない場合」) )

もちろん、すべてのフィールドをチェックしたくない場合は、特定のフィールドが合格した場合にのみtrueを返す必要があります。繰り返しになりますが、これに頼るべきではありませんが、平均的な人を思いとどまらせるだけなら、それは簡単な解決策です。

4
Raekye