☰

HTML フォームにカスタム検証メッセージを設定するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html forms validation constraint-validation-api
HTML フォームにカスタム検証メッセージを設定するにはどうすればいいですか? 質問する

次の HTML フォームがあります:http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

現在、両方が空白の状態で Enter キーを押すと、「このフィールドに入力してください」というポップアップ ボックスが表示されます。このデフォルトのメッセージを「このフィールドは空白のままにできません」に変更するにはどうすればよいでしょうか。

タイプ パスワード フィールドのエラー メッセージは単純です*****。これを再作成するには、ユーザー名に値を指定して [送信] をクリックします。

ベストアンサー1

以下はカスタム エラー メッセージを表示するコードです。

<input type="text" id="username" required placeholder="Enter Name"
       oninvalid="this.setCustomValidity('Enter User Name Here')"
       oninput="this.setCustomValidity('')"/>

この部分は、ユーザーが新しいデータを入力したときにエラー メッセージを非表示にするため重要です。

oninput="setCustomValidity('')"

注:thisキーワードはインライン イベント ハンドラーに必須ではありませんが、一貫性を保つために使用することもできます。

おすすめ記事