目次
テキストボックスで必須チェックを行う(required)
| <input type="text" ・・・ required> |
未入力でボタンを押すとエラーメッセージが出ます。
上記サンプルのコードです。
<form name="form1" onSubmit="return false">
<input type="text" id="input1" value="" maxlength="5" required>
<input type="submit" value="ボタン">
</form>2行目は、テキストボックスにrequired属性が付いています。
submitボタンを押した時に未入力の場合、デフォルトのメッセージが表示されます。
チェックの成否に応じてCSSで反映させる(validとinvalid)
| セレクタ:valid{プロパティ:値} |
| セレクタ:invalid{プロパティ:値} |
テキストボックスには、requiredの指定があります。
未入力のとき(invalid)は、背景色がつきます。入力されると(valid)文字に色がつきます。
上記サンプルで使用しているCSSです。
<style>
#input1:valid {
color: red;
}
#input1:invalid {
background: LightGrey;
}
</style>
<form name="form1" onSubmit="return false">
<input type="text" id="input1" value="" maxlength="5" required />
<input type="submit" value="ボタン" />
</form>
2行目の:validは、成功のときに実行されます。文字の色が変化します。
#input1はセレクタでCSSを適用する場所を指します。
5行目の:invalidは、失敗のときに実行されます。入力欄の背景色が変わります。
数値入力欄で数値の上限と下限のチェックを行う(maxとmin)
| <input type="number" ・・・ max="数値" min="数値"> |
指定した数値の上限または下限を超えた場合はエラーメッセージが表示されます。
5から7の数値を入力して下さい。
上記サンプルのコードです。
<p>5から7の数値を入力して下さい。</p>
<form name="form3" onSubmit="return false">
<input type="number" id="input3" value="1" max="7" min="5" maxlength="5">
<input type="submit" value="ボタン">
</form>3行目は、type="number"で数値入力欄です。
minは最小値です。5にしています。maxは最大値です。7にしています。それより小さいまたは大きい数値の場合はデフォルトのエラーのメッセージが表示されます。
メール入力欄でアドレスの妥当性チェックを行う(type="email")
| <input type="email" ・・・ > |
メール入力欄でアドレスの妥当性チェックを行うサンプルです。
上記サンプルのコードです。
<form name="form4" onSubmit="return false">
<input type="email" id="input4" maxlength="25" value="test">
<input type="submit" value="ボタン">
</form>2行目は、type="email"でメール入力欄が表示されます。
メール形式でない場合は、エラーのメッセージが表示されます。
URL入力欄でURLの妥当性チェックを行う(type="url")
| <input type="url" ・・・ > |
URLが妥当でない場合エラーメッセージが表示されます。
urlを入力して下さい。
上記サンプルのコードです。
<p>redまたはblueと入力して下さい。</p>
<form name="form6" onSubmit="return false">
<input type="text" id="input5" maxlength="4" pattern="red|blue" value="test">
<input type="submit" value="ボタン">
</form>2行目は、type="url"でURL入力欄です。
URL形式でない場合は、エラーのメッセージが表示されます。
テキストボックスで正規表現のチェックを行う(pattern)
| <input type="text" ・・・ pattern="正規表現"> |
指定の文字ではない場合はエラーメッセージが表示されます。
redまたはblue以外を入力してボタンを押すとメッセージが出ます。
上記サンプルのコードです。
<p>redまたはblueと入力して下さい。</p>
<form name="form6" onSubmit="return false">
<input type="text" id="input5" maxlength="4" pattern="red|blue" value="test">
<input type="submit" value="ボタン">
</form>3行目は、patternを使用しています。正規表現を使用できます。redまたはblueという文字を指定しています。
以下は、MDNのフォームデータの検証のリンクです。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation
関連の記事