skillup

技術ブログ

デザイン

HTML5のinputタグのvalidatorについて

投稿日:

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。

必須入力のほかにも、telやemail、時間など様々なタイプのものがあります。

例えばinput type=”number”と入力すると数字しか入らないようになります。

個人的に便利だと思ったのは正規表現でしょうか。整数5桁+少数1桁の入力のみを受け付けたいとなった時に、numberですとうまくこれを制御できません。

そんなときに下記のように正規表現を入れてエラーチェックを行うことが出来たりします。

こうするとフォームの登録ボタンを押したときに、これらのエラーが出て、submitできないようになります。

参考リンク

inputタグの基礎
http://honttoni.blog74.fc2.com/blog-entry-138.html
http://www.tagindex.com/html5/form/input.html
JSとの比較など
http://labs.opentone.co.jp/?p=4730

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …