Fri, October 20, 2017

Formの入力エラーチェック required pattern

HTML5ではformに関する新しい機能も追加されました。今回はその中でrequired属性とpattern属性を紹介したいと思います。
これらの属性を使うと、フォームの入力エラーチェックを簡単に実装できます。

■required属性

required属性を付加すると、その要素は必須項目となり、何も入力されていない場合にエラーが表示されます。

サンプルコード
<form method="post">
<ul>
<li><input type="text" name="" required></li>
</ul>
<input type="submit">
</form>
実行結果

■pattern属性

pattern属性は、正規表現でパターンを指定することができ、入力した値が指定したパターンと異なる場合にエラーが表示されます。

サンプルコード(郵便番号のパターンを指定した例)
<form method="post">
<ul>
<li><input type="text" pattern="^[0-9]{3}\-[0-9]{4}$" name=""></li>
</ul>
<input type="submit">
</form>
実行結果

また、HTML5ではinputタグに以下のtype要素が新たに追加されました。
指定した要素に対して、入力が不適切な形式の場合にエラーが表示されます。

<input type=”tel”> … 電話番号
<input type=”search”> … 検索テキスト
<input type=”url”> … URL
<input type=”email”> … メールアドレス
<input type=”datetime”> … 協定世界時での日時
<input type=”date”> … 日付
<input type=”month”> … 月
<input type=”week”> … 週
<input type=”time”> … 時間
<input type=”datetime-local”> … 現地時間での日時
<input type=”number”> … 数値
<input type=”range”> … 範囲を指定した数値
<input type=”color”> … 色

type要素によってはフィールドの横にアイコンがついたりするようですね。

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree