HTMLのinputタグの属性でバリデーションする方法を説明していきます。バリデーションといえばPHPやjavascript。という方もおられると思いますが少しのバリデーションならHTMLのみで充分バリデーション可能ですので是非お試しください。
pattern=””
<input pattern=””>という風にpatternという属性を使用します。例えば電話番号の入力を半角数字のみにしたい場合は <input pattern=”[0-9]*”> と記述することで0~9の半角数字のみ入力可能になります。
required
<input required>と記述することで入力必須項目になります。
minlength/maxlength
<input minlength=”5″>
上記は一例ですが、これで入力が5文字以下だとエラーが出るようになります。maxlengthはその反対で最大文字数を指定できます。
今回説明した内容はほんの一例です。pattern属性やその他属性を活用して他にも沢山のバリデーションをしてみてください。HTMLのみでバリデーションをした方がシンプルになる場合もあるかもしれません。
コメント