exValidation とは
リアルタイムで入力チェック（バリデーション）を付けられるjQueryプラグインです。
jquery validation engine など、他にも優れたプラグインはありますが、exvalidation は日本人の方が作られたということで、全角チェックなど日本語まわりの処理が充実しています。
使い方はあまりに簡単なので、注意点からはじめます。
注意点
サンプルソースコピペだと送信できない
github からダウンロードしたサンプルファイルのソースコピペで大抵動きますが、index.html のソースをコピペだと送信できない現象が発生します。
原因はページ下部のここ。
index.html
<script type="text/javascript">
var validation = $("form")
.submit(function() {
return false;
})
.exValidation({
firstValidate: true,
rules: {
name: "chkrequired",
kana: "chkrequired chkkatakana",
//省略//
},
stepValidation: true
});
var selectable = $('#pref').selectable({
callback: function() {
validation.laterCall('#pref');
}
});
</script>
この中で、下のコードを消せば送信できます。
.submit(function() {
return false;
})
チェックボックス、ラジオボタンは span id="xxx" で囲む
入力ボックスには input type="xxxx" の値を下の箇所で指定すればチェックが効きます。
.exValidation({
firstValidate: true,
rules: {
name: "chkrequired",
kana: "chkrequired chkkatakana",
//省略//
},
ただ、チェックボックスとラジオボタンは type=""の値を指定してもチェックが動きません。
input の前後を、 span id="xxx" で囲み、xxxの値をscriptで指定します。id名は、typeの値と一致していなくても大丈夫です。
<span id="checkbox_chk">
<label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label>
<label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label>
<label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label>
<label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label>
<label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label>
</span>
.exValidation({
firstValidate: true,
rules: {
name: "chkrequired",
kana: "chkrequired chkkatakana",
checkbox_chk: "chkcheckbox"
//省略//
},
あと、カスタマイズはいろいろ出来るので試してみましょう。
軽くて非常に使いやすいです。