2012年09月30日

formToWizardとjquery-plugin-validation

書き込み項目の多いフォームを何個かにわけてくれるjQueryのライブラリ、formToWizard.js

長いフォームもウィザード形式にしてくれるので、かなりイイ。

そしてフォームと言えば入力値のチェック。入力値チェックのjQueryはたくさんでているけれども今回はとりあえずjquery-validation-1.10.0を使うことに。

で、両方いっぺんに使いたかった(ステップ毎にvalidateしたかったんです)ので、参考にしたのが以下のサイト。

海外サイトFormToWizard With Validation << LeLand様。

いや〜〜英語なんてからきしダメだけどソースコードそのまま載せてくれるのですごい助かりました。(DLもできる)

一部なぜか私の環境下では動かなかったので少し修正しましたが、大方使えました。

私の書いた手順は結構読みにくいのでDEMO用意しました。

ソースDL

私の使用手順は以下の通り。(未来の自分へのメモ書きです)
jQueryのよみこみ。

まずheadで以下を読み込む。

<script type="text/javascript" src="jquery-1.7.2.min.js" charset="UTF-8"></script> ←まずjQuery
<link href="jquery-validation-1.10.0/css/screen.css" rel="stylesheet" type="text/css">  ←jquery-validation-1.10.0に同封のCSS
<script type="text/javascript" src="jquery-validation-1.10.0/jquery.validate.js" charset="UTF-8"></script> ←validater本体
<script type="text/javascript" src="jquery-validation-1.10.0/jquery.validate.japlugin.js" charset="UTF-8"></script> ←参考サイト「くらげだらけ」さんからいただいたローカライズファイル。
< script type="text/javascript" src="formToWizard.js" charset="UTF-8"></script> ←フォームをウィザードに分けてくれるjQueryプラグイン。
< link href="fieldset.css" rel="stylesheet" type="text/css"> ←ウィザード用CSS

フォームのタグ。※seesaaブログで特殊文字使っても勝手にタグとして読み込まれてしまうので各種タグのカッコのところに敢えて半角スペース入れてます。。。
<form id="sampleform" method="post" action="./">
< fieldset >
< legend>ステップ1< /legend>
< input type="text" id="text1" name="text1" /><br />
< input type="text" id="tel" name="tel" /><br />
< input type="text" id="email" name="email" /><br />
< /fieldset >

< fieldset >
< legend>ステップ2 </legend>
< select name="selectbox1" id="selectbox1">
<option value="1">あ</option>
<option value="2">い</option>
<option value="3">う</option>
<option value="4">え</option>
<option value="5">お</option>
< /select>
< /fieldset >

< fieldset >
< legend>ステップ3</legend>
< span id="gendar">< input type="radio" name="gendar" value="0" id="male">男性&nbsp;< input type="radio" name="gendar" value="1" id="fmale">女性</span>
</fieldset>

< input class="button" type="submit" id="submit_button" value="submit" />
</form>

< fieldset>< /fieldset>でステップ毎に分けていて
< legend ></ legend >でステップ毎のタイトル?が決定されてウィザードに分けられます。

そしてjavascript。
<script type="text/javascript">

$(document).ready(function(){

$("#sample_form").validate(
{
rules: {
text1: "required",
tel:{
required:true,
telnum:true
},
email:{
required:true,
email:true
},
selectbox1: "required",
gendar: "required"
},
messages: {
},
errorPlacement:function(error,element) {
if(element.attr("id")=="male" || element.attr("id")=="fmale"){
error.insertAfter("#gendar");
} else {
error.insertAfter(element);
}
}
}
);
$("#sample_form").formToWizard({
submitButton: 'submit_button',
validationSettings:{
}
});

});
</script>

留意点

・たしかidではなくnameからvalidate対象のオブジェクト取得してたと思う。
・エラー位置を変えたいときはerrorPlacementを使う。

errorPlacementなどを調べるのに参考にさせてもらったサイト
jQuery Validation Pluginメモ

エラー文を日本語ローカライズにもしたかったので、それも行いました。
下記サイトからソースいただきました。
jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携(くらげだらけ)

jQueryを開発した方々はじめ、上記の参考サイトさんのおかげで未熟ながらやりたいことができました。皆さんに感謝ですm(_ _)m

えーっと、ちなみにFormToWizard With Validation << LeLand様のサイトのスクリプト一部変えてまして、それもいちおうメモ。

formToWizard.js

/* Created originally by jankoatwarpspeed.com */
(function($) {
$.fn.formToWizard = function(options) {
options = $.extend({
submitButton: "",
validate:false //Added new option
}, options);

var element = this;

var steps = $(element).find("fieldset");
var count = steps.size();
var submmitButtonName = "#" + options.submitButton;
$(submmitButtonName).hide();

//Setup validation if there are validation settings
if(options.validationSettings != undefined){
$(element).validate(options.validationSettings);
options.validate=true;
}

// 2
$(element).before("<ul id='steps'></ul>");

steps.each(function(i) {
$(this).wrap("<div id='step" + i + "'></div>");
$(this).append("<p id='step" + i + "commands'></p>");

// 2
var name = $(this).find("legend").html();
$("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

if (i == 0) {
createNextButton(i);
selectStep(i);
}
else if (i == count - 1) {
$("#step" + i).hide();
createPrevButton(i);
}
else {
$("#step" + i).hide();
createPrevButton(i);
createNextButton(i);
}
});

function createPrevButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< 前へ</a>");

$("#" + stepName + "Prev").bind("click", function(e) {
$("#" + stepName).hide();
$("#step" + (i - 1)).show();
$(submmitButtonName).hide();
selectStep(i - 1);
});
}

function createNextButton(i) {
var stepName = "step" + i;
$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>次へ ></a>");

$("#" + stepName + "Next").bind("click", function(e) {
var permitted=true;
if (options.validate){
var fieldset = $("#" + stepName + "Next").parents("fieldset");
//Get all inputs in this step
var fieldsetElements=getFormElementFromFieldset(fieldset);
//Call validation
$(element).valid();
//Get all invalid elements
var invalidElements = $(element).validate().invalidElements();
//Form may be invalid, but if none of the invalid elements are in the fieldset allow Next
permitted=noMatchesExist(fieldsetElements, invalidElements)

}
if (permitted){
$(element).validate().resetForm();
$("#" + stepName).hide();
$("#step" + (i + 1)).show();
if (i + 2 == count)
$(submmitButtonName).show();
selectStep(i + 1);
}

});
}

function selectStep(i) {
$("#steps li").removeClass("current");
$("#stepDesc" + i).addClass("current");
}

//Two new functions added
function getFormElementFromFieldset(f){
var tagNames = ['input', 'select', 'textarea'];
var elements = [];

$.each(tagNames, function(i, item) {
$.each($(f).find(item), function (j, element){
elements.push(element);
});

});
return elements
}

/* ↓↓↓この関数だけちょっと変更しました↓↓↓ */
function noMatchesExist(x, y){
var match=true;
$.each(x, function(i, v){
$.each(y, function(j, w){
if (v==w){
match=false;
}
});
});
return match;
}

}
})(jQuery);
posted by ビスケットLove at 22:38| Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。