お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

この入力はできそこないだ。submitできないよ

入力フォームとかでリアルタイムにチェックするヤツがおりますよね。
アレをやってやりましょう。
巷にはプラグインがあるんですが、なんか使いにくかったので・・・。

どういうタイミングで判定を行うのか?

入力途中でずっと走らせるのは無駄しかありません。
なので、一番のベストは【フォーカス】が外れた時かなと思ってます。

エラー表示は?

各フォームの下とかにエラーメッセージを表示します。
一定時間すぎると消えるフキダシ方式もありますが
あまりにもアレは不親切でしかないと思ってるので不採用です。

バリデートの指定方法

グループ名とかにしても良かったのですが
自由度を優先して、個別に名前をつけて、ソレをclassに指定する形をとりました。

バリデート処理のトリガー

バリデート処理が不要な項目もありますので、トリガーをつけるようにしています。 input要素にchkForm を付与させます。

<input type="text" class="chkForm" value="" >

必須チェック(txtフォーム)

chkConditionを付与します。

<input type="text" class="chkForm chkCondition" value="" >
必須チェック

必須チェック(ラジオボタン)

chkConditionRadioを付与します。

<input type="radio" class="chkForm chkConditionRadio" name="test" value="" >
必須チェック(ラジオボタン)
テスト1 テスト2

必須チェック(プルダウン)

chkConditionSelectを付与します。

<select class="chkConditionSelect">
<option value="1">テスト</option>
</select>
必須チェック(プルダウン)

全角カナチェック

chkAllKanaを付与します。

<input type="text" class="chkForm chkAllKana" value="" >
全角カナチェック

ひらがなチェック

chkAllHiraKanaを付与します。

<input type="text" class="chkForm chkAllHiraKana" value="" >
ひらがなチェック

半角カナチェック

chkAllKanaSを付与します。

<input type="text" class="chkForm chkAllKanaS" value="" >
半角カナチェック

半角数字チェック

chkAllNumを付与します。

<input type="text" class="chkForm chkAllNum" value="" >
半角数字チェック

半角英数字チェック

chkAllNumAndAlphabetを付与します。

<input type="text" class="chkForm chkAllNumAndAlphabet" value="" >
半角英数字チェック

メールアドレス形式チェック

chkMailAddressを付与します。

<input type="text" class="chkForm chkMailAddress" value="" >
メールアドレス形式チェック

メールアドレス同一チェック

chkMailAddressAgreeを付与したフォームと
chkMailAddressAgreeOriginを付与したフォームを用意します。

<input type="text" class="chkForm chkMailAddressAgree" value="" >
<input type="text" class="chkForm chkMailAddressAgreeOrigin" value="" >
メールアドレス同一チェック

パスワード同一チェック

chkPwAgreeを付与したフォームと
chkPwAgreeOriginを付与したフォームを用意します。

<input type="text" class="chkForm chkPwAgreeOrigin" value="" >
<input type="text" class="chkForm chkPwAgree" value="" >
パスワード同一チェック

電話番号チェック(ハイフン無し)

chkTelを付与します。

<input type="text" class="chkForm chkTel" value="" >
電話番号チェック(ハイフン無し)

電話番号チェック(ハイフンあり)

chkTel2を付与します。

<input type="text" class="chkForm chkTel2" value="" >
電話番号チェック(ハイフンあり)

同意するチェック

chkAgreeを付与します。
同意するチェックボックスの親要素には agreeArea クラスを付与してください。

<div class="agreeArea">
<input type="checkbox" class="chkForm chkAgree" value="" >
</div>
同意するチェック
同意する

入力桁数チェック(固定)

chkValStringNum[桁数]を付与します。

<input type="text" class="chkForm chkValStringNum10" value="" >
入力桁数チェック(固定)

入力桁数チェック(範囲指定)

chkRangeValLengthNum[入力最少桁]|[入力最大桁]を付与します。

<input type="text" class="chkForm chkRangeValLengthNum2|5" value="" >
入力桁数チェック(範囲指定)

全体チェック

確認画面へのボタンに btnConfクラスを付与します。
エラーが発生した要素のうち、一番最初の位置へスクロールします。

<input type="buttom" class="btnConf" value=" 確認画面へ " >

ソース

処理が長いので、JSファイルを直接参照してください。
JSファイル