基本編も書きました。よろしければそちらもご覧ください。

いやぁーーーー
すばらしいものを提供されている方がいらっしゃってとても助かっています。
これです。
↓↓↓
どんなフォームにも使えるjQueryのフォームバリデーション exValidation
※2013/11/9現在、閉鎖されています・・・

エラー項目にはバルーン表示でエラー通知してくれるというナウい(死語)もの。
このexValidationを利用して開発中のフォームに当てはめてみたんですが・・・
あ、この条件下では・・・ここは必須で・・・で、こうするとこの項目自体見えなくなって・・・・っていう感じになってしまい
なにをどーして良いのやら・・・という風になってしまいました。

そこで、いろいろ試しに試して出来たのがこのサンプルです。

exValidation サンプル

こちらです→ exValidationサンプル ← クリック

 
まず、御覧頂いて・・・っと
このフォームは下記のような動作をするものです。
1.まずはユーザーに区分を入力してもらう
2.入力してもらった区分によって異なる項目のフォームを表示する
3.項目の中にはある項目が特定の値のときだけ必須になるというものも存在する
このような場合にどうしたか・・・ということをご紹介します。
まず、サンプルの構造は下記のようになっています。
—————————————————————–
[切り替え] これ自体が必須項目でもあります。
[項目群1] 切り替えが「20歳未満」の時に表示されるフォーム
[項目群2] 切り替えが「20歳以上」の時に表示されるフォーム
—————————————————————–

<!-- 〜〜前略〜〜 -->
<select id="sel" name="sel" onchange="changeDiv(this)">
<option value="">--</option>
<option value="1">20歳未満のお客様</option>
<option value="2">20歳以上のお客様</option>
</select><br />・<br /><!-- 20歳未満のお客様用項目 --></p>
<div id="scene1">
	<!-- 〜〜中略〜〜 -->
</div>
<p><!-- 20歳以上のお客様用項目 --></p>
<div id="scene2">
	<!-- 〜〜中略〜〜 -->
</div>
<!-- 〜〜後略〜〜 -->

で、JavaScriptはこんな感じ

// 初期にフォームの分岐を非表示にする
$(document).ready(function() {
$("div[id*=scene]").css("display", "none");
});
// Validationの初期設定
$(function(){
var validation = $("form")
.exValidation({
rules: {
sel: "chkrequired",
name: "chkrequired",
name_: "laterCall",
・
・
・
},
stepValidation: true,
errTipCloseBtn: false,
errHoverHide: true,
scrollToErr: true
});
// イベントリスナー
$('input.laterCall').click(function() {
validation.laterCall('#' + this.id.replace('_',''));
});
$('input[name=sake]').change(function() {
changeSakeItem();
validation.laterCall('#sake_kind');
});
// 一度動作し初期化する
changeDiv(document.getElementById('sel'));
});
// お酒を飲むかどうかで必須項目チェンジ
function changeSakeItem() {
clearErrors();
// alert($('input[name=sake]:checked').val());
if ($('input[name=sake]:checked').val() != "1") {
$('#sake_kind').attr('class', '');
} else {
$('#sake_kind').attr('class', 'chkrequired');
}
}
// エラー削除
function clearErrors() {
// 表示されているエラーをフェイドアウト
$("div[id*=err_]").fadeOut();
}
// ユーザ区分変更
function changeDiv(elem) {
clearErrors();
var accNo = 0;
if (elem != null && elem.value =="1") {
accNo = 1;
} else if (elem == null || elem.value.length == 0) {
// N/A
accNo = 0;
} else {
accNo = 2;
}
$("div[id*=scene]").css("display", "none");
if (accNo > 0) {
$("div#scene"+accNo).css("display", "block");
}
// まずは必須項目チェック全外し
$('#name').removeClass('chkrequired');
$('#kana').removeClass('chkrequired');
$('#email').removeClass('chkrequired');
$('#birthday').removeClass('chkrequired');
// 20歳未満か20歳以上で必須項目条件切り替える
switch (accNo) {
case 1:
$('#name').addClass('chkrequired');
$('#kana').addClass('chkrequired');
$('#email').addClass('chkrequired');
break;
case 2:
$('#birthday').addClass('chkrequired');
break;
}
clearErrors();
}

こんな感じの実装で出来ました。
※ ・ の部分は中略です。

要するに「class=chkrequired」っていうのを外せば必須項目にならないし
なんでもない項目に「class=chkrequired」を乗っけてあげればその時点から必須項目になります。
サンプルで「20歳以上」にしてから「飲む」を選択すると「お飲みになる種類」が必須になる・・・という感じです。
 

上記サンプルのアーカイブをダウンロードしていただけます!

※ご自由にお使いください。(著作権は放棄しませんが、中に名前もなく、使用に規制もありません。)

Facebookにて「いいね!」してくださっている方は他にもダウンロード出来るアーカイブが揃っています!
Facebookページ「株式会社ジーティーアイ」
ダウンロードコーナーはタブメニューの「ダウンロード」です。

使用したご感想などコメントいただけるとありがたいです。


この記事が気に入ったら
いいね ! しよう

Twitter で