jQueryValidationのチェックルールその2

jQueryValidationのチェックルールその2

script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

文字列長のチェック

minlength=””
で最小文字列

maxlength=””
で最大文字数を指定することが可能

例えば、Twitterみたいに140文字までにするなら

<input type="text" minlength="1" maxlength="140"/>

入力値が一致しているかチェック

これは、ログインのパスワードとか
確認のため、もう一回入力という、あらかじめ値があるものときに使う

これには、
equalTo=””
を使う

パスワード: <input type="password" value="" id="password"/>

パスワード(確認): <input type="password" value="" id="confirmpasswd" equalTo="#password"/>

というように使う

#password
は、id=”password” なので、これと比較している

会員登録でよくある
メールアドレス
パスワード
など、間違えると後々すごく困るものに使う

script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

エラーメッセージの内容と、表示場所の変更

エラーメッセージの変更関連は
label要素を使う

<input type="email" id="userid" name="userid" class="required"/>
<label for="userid" class="error" style="display:none;">
メールアドレスを入力してください
</label>

label要素の
for=”” には、検証したいフィールド
今回なら input要素

id=””
もしくは
name=””
の中身を指定する

そして、class=”error”を指定しておく

最初に画面を開いたときには
このエラーメッセージは出したくないので
style=”display:none;”
としておくことで非表示になる

あと、今回は
input の下へ label を書いたから下にエラーメッセージがでるけど
入力欄の上にエラーメッセージを出したいのなら

<label for="userid" class="error" style="display:none;">
メールアドレスを入力してください
</label>
<input type="email" id="userid" name="userid" class="required"/>

とすれば
上にエラーメッセージが表示される

コメントを残す

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