この入力はできそこないだ。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="" >
必須チェック(プルダウン)
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ファイル