jQuery 在多步表单验证失败后中断
jQuery breaks after validation failure on multistep form
我有一个带有下一个和上一个按钮的 4 步表单。我正在使用 jQuery 验证来验证表单。
它会在您单击“下一步”时验证表单，但是，如果您未通过该验证步骤，则“下一步”和“上一步”按钮都不再起作用。
下面是我的代码。有人有什么建议吗？
Javascript:
$(document).ready(function() {
$("body").on('click', '.next', function(){
if(animating) return false;
animating = true;
var type = $(this).parent().parent().attr("id");
if(type == "business_form"){
if($("#business_form").valid() == true){
$("#return-login2").hide();
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("#business_form 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;
},
});
}
}
});
$("body").on('click', '.previous', 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;
},
});
});
$("#business_form").validate({
rules: {
business_pass: {
required: true,
minlength: 5
},
business_cpass: {
required: true,
minlength: 5,
equalTo: "#business_pass"
},
business_email: {
required: true,
email: true
},
business_name: {
required: true
},
business_about: {
required: true
},
business_website: {
url: true
},
'this[]': {
required: true
},
'that[]': {
required: true
}
},
messages: {
business_pass: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
business_cpass: {
required: "Please confirm your password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
business_name: {
required: "Please provide your company name"
},
business_about: {
required: "Please provide a short blurb about your business"
},
business_email: "Please enter a valid email address"
},
submitHandler: function () {
var pw = pw = $("#business_pass");
var conf = conf = $("#business_cpass");
var form = $("form#business_form");
if(pw[0] == null){
form.submit();
} else {
hashp(form[0], pw[0], conf[0]);
return false;
}
},
errorLabelContainer: '#errors3'
});
});
HTML:
<form name="business_form" id="business_form" action="" method="post">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
<div id="errors3" class="error"></div>
<fieldset>
<input type="text" name="business_email" id="business_email" placeholder="Email" />
<input type="password" name="business_pass" id="business_pass" placeholder="Password" />
<input type="password" name="business_cpass" id="business_cpass" placeholder="Confirm Password" />
<a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
</fieldset>
<fieldset>
<input type="text" name="business_name" id="business_name" />
<textarea name="business_about" id="business_about"></textarea>
<a name="next" class="btn previous action-button" id="next-who"><i class="fa fa-arrow-left"></i></a>
<a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
</fieldset>
<fieldset>
<input type="text" name="business_address" placeholder="Address" />
<input type="text" name="business_postal" placeholder="Postal Code" />
<input type="text" name="business_phone" placeholder="Phone Number" />
<input type="text" name="business_website" placeholder="Website URL" />
<div class="clear"></div>
<a name="next" class="btn previous action-button" id="next-contact"><i class="fa fa-arrow-left"></i></a>
<a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
</fieldset>
<fieldset style="padding-left:15%;">
<div id="items">
<div class="new-this">
<input type="text" name="this[]" id="this-0" style="width:50%;" placeholder="Discipline" />
<select name="that[0]" id="that-0">
<option value="">--</option>
</select>
<a name="add-this" class="btn btn-d add-this" id="add"> <i class="fa fa-plus"></i></a>
</div>
</div>
<div class="clear"></div>
<a name="next" class="btn previous action-button"><i class="fa fa-arrow-left"></i></a>
<a name="next" class="btn submit action-button" id="submit-business"><i class="fa fa-check"></i></a>
</fieldset>
</form>
是下面的语句阻止了你的伴侣。
$("body").on('click', '.next', function(){
if(animating) return false; //try commenting this statement
animating = true;
//Other code
}
当您第一次单击下一步按钮时，animating 变量将为 undefined。因此它 将动画变量重新初始化为 true。因此第二个当您单击下一个按钮时，将根据 condition.Since 检查变量，声明变量 globally，并且先前的值设置为 true，因此满足条件 returning false 和阻止你去下一个 step.Hope 让你知道你可能做错了什么伙计.. :)
我有一个带有下一个和上一个按钮的 4 步表单。我正在使用 jQuery 验证来验证表单。
它会在您单击“下一步”时验证表单，但是，如果您未通过该验证步骤，则“下一步”和“上一步”按钮都不再起作用。
下面是我的代码。有人有什么建议吗？
Javascript:
$(document).ready(function() {
$("body").on('click', '.next', function(){
if(animating) return false;
animating = true;
var type = $(this).parent().parent().attr("id");
if(type == "business_form"){
if($("#business_form").valid() == true){
$("#return-login2").hide();
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("#business_form 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;
},
});
}
}
});
$("body").on('click', '.previous', 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;
},
});
});
$("#business_form").validate({
rules: {
business_pass: {
required: true,
minlength: 5
},
business_cpass: {
required: true,
minlength: 5,
equalTo: "#business_pass"
},
business_email: {
required: true,
email: true
},
business_name: {
required: true
},
business_about: {
required: true
},
business_website: {
url: true
},
'this[]': {
required: true
},
'that[]': {
required: true
}
},
messages: {
business_pass: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
business_cpass: {
required: "Please confirm your password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
business_name: {
required: "Please provide your company name"
},
business_about: {
required: "Please provide a short blurb about your business"
},
business_email: "Please enter a valid email address"
},
submitHandler: function () {
var pw = pw = $("#business_pass");
var conf = conf = $("#business_cpass");
var form = $("form#business_form");
if(pw[0] == null){
form.submit();
} else {
hashp(form[0], pw[0], conf[0]);
return false;
}
},
errorLabelContainer: '#errors3'
});
});
HTML:
<form name="business_form" id="business_form" action="" method="post">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>
<div id="errors3" class="error"></div>
<fieldset>
<input type="text" name="business_email" id="business_email" placeholder="Email" />
<input type="password" name="business_pass" id="business_pass" placeholder="Password" />
<input type="password" name="business_cpass" id="business_cpass" placeholder="Confirm Password" />
<a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
</fieldset>
<fieldset>
<input type="text" name="business_name" id="business_name" />
<textarea name="business_about" id="business_about"></textarea>
<a name="next" class="btn previous action-button" id="next-who"><i class="fa fa-arrow-left"></i></a>
<a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
</fieldset>
<fieldset>
<input type="text" name="business_address" placeholder="Address" />
<input type="text" name="business_postal" placeholder="Postal Code" />
<input type="text" name="business_phone" placeholder="Phone Number" />
<input type="text" name="business_website" placeholder="Website URL" />
<div class="clear"></div>
<a name="next" class="btn previous action-button" id="next-contact"><i class="fa fa-arrow-left"></i></a>
<a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
</fieldset>
<fieldset style="padding-left:15%;">
<div id="items">
<div class="new-this">
<input type="text" name="this[]" id="this-0" style="width:50%;" placeholder="Discipline" />
<select name="that[0]" id="that-0">
<option value="">--</option>
</select>
<a name="add-this" class="btn btn-d add-this" id="add"> <i class="fa fa-plus"></i></a>
</div>
</div>
<div class="clear"></div>
<a name="next" class="btn previous action-button"><i class="fa fa-arrow-left"></i></a>
<a name="next" class="btn submit action-button" id="submit-business"><i class="fa fa-check"></i></a>
</fieldset>
</form>
是下面的语句阻止了你的伴侣。
$("body").on('click', '.next', function(){
if(animating) return false; //try commenting this statement
animating = true;
//Other code
}
当您第一次单击下一步按钮时，animating 变量将为 undefined。因此它 将动画变量重新初始化为 true。因此第二个当您单击下一个按钮时，将根据 condition.Since 检查变量，声明变量 globally，并且先前的值设置为 true，因此满足条件 returning false 和阻止你去下一个 step.Hope 让你知道你可能做错了什么伙计.. :)