HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。
必須入力のほかにも、telやemail、時間など様々なタイプのものがあります。
例えばinput type=”number”と入力すると数字しか入らないようになります。
個人的に便利だと思ったのは正規表現でしょうか。整数5桁+少数1桁の入力のみを受け付けたいとなった時に、numberですとうまくこれを制御できません。
そんなときに下記のように正規表現を入れてエラーチェックを行うことが出来たりします。
1 |
<input type="text" name="cost" size="7" maxlength="7" pattern="^[0-9]{1,5}(\.[0-9])?$" title="入力値は整数5桁+少数1桁になります" id="expense1-per-cost" value="" > |
こうするとフォームの登録ボタンを押したときに、これらのエラーが出て、submitできないようになります。
参考リンク
inputタグの基礎
TAG index HTML&CSS Web制作リファレンス <input>
JSとの比較など
【HTML5】HTML5とjQueryの比較(フォーム)