//名前項目のバリデ
function step1_validator(){
var firstName = $('#first_name').val();
var lastName = $('#last_name').val();
$('#name_error').remove();
if( !firstName || !lastName){
$('#step1').prepend("<span id='name_error' style='color:red'>名前が未入力ですぞ</span>");
return false;
} else {
return true;
}
}
$(function(){
//入力項目のステップセッティング
var step1 = $('#step1');
var step2 = $('#step2');
var step3 = $('#step3');
var step4 = $('#step4');
//進むボタンとか
$.fn.bindStep.defaults.prevBtn = "http://kachibito.net/wp-content/uploads/2011/09/arrow02.png";
$.fn.bindStep.defaults.nextBtn = "http://kachibito.net/wp-content/uploads/2011/09/arrow01.png";
$.fn.bindStep.defaults.generateMarkup = function(id1,id2,img){
return([
'<img ',
'src="', img, '" ',
'id="', id1 , '" ',
'/>',
].join(''));
}
step1.bindStep(step2,{
nextValidator: step1_validator
});
step2.bindStep(step3);
step3.bindStep('#step4');
$('#start_over').click(function(){
$.goToStep('#step1',function(currStep,nextStep){
currStep.slideUp('slow',function(){
nextStep.slideDown('slow');
});
});
});
});
$(function(){
$('#babyStepsForm').submit(function(){
destepify();
alert('アラート!');
return false;
});
});
//ボタン
function destepify(){
$('div').show();
$('#destepify_btn').hide();
$('#stepify_btn').show();
}
//切り替え
function stepify(){
$('div').hide();
$("#step1").show();
$('#stepify_btn').hide();
$('#destepify_btn').show();
}
<p>
ドキュメントはこっち→<a href="http://coryodaniel.com/index.php/2008/08/22/babysteps/" target="_blank">CoryODaniel.com</a>
<br />
</p>
<form id="babyStepsForm" method="post">
<div id="step1">
<h3>Step 1</h3>
苗字: <input type="text" id="first_name" />
<br />
名前: <input type="text" id="last_name"/>
<br />
</div>
<div id="step2" class="hidden">
<h3>Step 2</h3>
好きな動物は?:
<select>
<option>犬</option>
<option>わんこ</option>
<option>dog</option>
</select>
<br />
なんか教えて><:
<br />
<textarea cols="40" rows="10">なんでもいいから><</textarea>
<br />
</div>
<div id="step3" class="hidden">
<h3>Step 3</h3>
好きな漫画: <input type="text" />
<br />
今まで食べたパンの枚数: <input type="text" />
<br />
</div>
<div id="step4" class="hidden">
<h3>Step 4</h3>
<button type="submit">送信する</button> または、
<a href="#" id="start_over">最初からやり直す</a>
<br />
</div>
</form>
div{border: 1px solid #b7b7b7;background: #d6ede6;width:450px;margin: 3px; padding: 3px;}
.hidden{
display: none;
}
External resources loaded into this fiddle: