我正在尝试创建一个收集有关用户信息的表单。表格有5个步骤：
第1步：用户信息（姓名，电子邮件，电话，年龄，性别）
第2步：是或否问题
第3步：是或否问题
第4步：是或否问题
第5步：是或否问题
该表单允许用户进入下一阶段，或返回上一步。
在允许用户进入下一步之前，用户必须满足要求。如果问题没有得到解答，验证将提醒用户。
如何将验证码添加到原始JavaScript，以便每个步骤都可以进行动画和验证？
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
document.getElementById('btnNext').addEventListener('click',
function(){
//text inputs
if(!document.getElementById('fullname').value){
alert('Full Name is required');
return false;
}
else if(!document.getElementById('email').value){
alert('Email is required');
return false;
}
else if(!document.getElementById('phone').value){
alert('Phone Number is required');
return false;
}
else if(!document.getElementById('age').value){
alert('Age is required');
return false;
}
//radio buttons
var genderSet = false;
var genderBtns = document.getElementsByName('gender');
//console.log(genderBtns);
for(var i=0, btn; btn=genderBtns[i];++i){
if(btn.checked){
genderSet=true;
break;
}
}
if(!genderSet){
alert('Gender is required');
return false
}
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Step 1</h2>
<h3 class="fs-subtitle">Background Information</h3>
<input type="text" id="fullname" name="fullname" placeholder="Full Name">
<input type="text" id="email" name="email" placeholder="E-Mail">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="number" id="age" name="age" placeholder="Age">
<h4>Gender</h4>
<div class="row">
<div>
<input type="radio" name="gender" value="male" id="gender-male"/>
<label for="gender-male">Male</label>
</div>
<div>
<input type="radio" name="gender" value="female" id="gender-female"/>
<label for="gender-female">Female</label>
</div>
</div>
<div class="row">
<h4>Description</h4>
<div class="input-group">
<label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. </label>
</div>
</div>
<input type="button" name="next" id="btnNext" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Step 2 </h2>
<h3 class="fs-subtitle">Please select one of the following</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
<div>
<select name="past" id="past">
<option value=""disabled selected>Select One</option>
<option value="a">Yes</option>
<option value="b">No</option>
</select>
</div>
<br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" id="PastNext" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Step 3</h2>
<h3 class="fs-subtitle">Please select one of the following</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div>
<select>
<option value=""disabled selected>Select One</option>
<option value="a">Yes</option>
<option value="b">No</option>
</select>
</div>
<br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Step 4</h2>
<h3 class="fs-subtitle">Please select one of the following</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>
<div>
<select>
<option value=""disabled selected>Select One</option>
<option value="a">Yes</option>
<option value="b">No</option>
</select>
</div>
<br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Step 5 </h2>
<h3 class="fs-subtitle">Please select one of the following</h3>
Can you come to this location?<br> <br>
<br>
<div>
<select>
<option value=""disabled selected>Select One</option>
<option value="a">Yes</option>
<option value="b">No</option>
</select>
</div>
<br><br><br>
<div class="row">
<h4>Terms and Conditions</h4>
<div class="input-group">
<input id="terms" type="checkbox">
<label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </label>
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
我的验证码：
$("#PastNext").click(function(event){
var validate = $("#past").val();
if(validate == "")
{
event.preventDefault();
alert("You have not selected any option");
}
});