[ jQuery ] フォームの入力チェックをする その2

投稿日:2013年8月26日

フォームの入力チェックをするでフォームの入力チェックの拡張機能を作成しましたが、もうすこし使いやすくしました。

jQuery を読み込んだ後に読み込んでください。
20130826.js

まず HTML 側にクラスを指定します。使用するクラス名は以下のとおりです。

error-block
チェックしたい入力の要素とエラーメッセージの要素を囲むブロックです
error-text
エラーメッセージを出す要素です
required
必須項目にしたい input または textarea または select に指定します。未選択の selectvalue は -1 を設定します。
numeric
数字のみ許可したい input に指定します。
alphabetic
アルファベットのみ許可したい input に指定します。
hiragana
ひらがなのみ許可したい input に指定します。
katakana
カタカナのみ許可したい input に指定します。
mail
メールアドレスのみ許可したい input に指定します。
zenkaku
全角のみ許可したい input に指定します。

HTML例

JavaScript は form を指定して呼び出すだけです。複数でもできます。

JavaScript

オプションでエラーメッセージを指定できます。下記例のテキストがデフォルトになっています。

ソース

(藤崎)

関連記事

カテゴリー: JavaScript, jQuery, WEB, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル