禁用验证单击之前的JQuery样式

Question

我使用jquery验证和jquery步骤在一起，它工作得很好，但当我做之前它要求验证当前步骤，我想禁用，并允许用户返回没有当前页面验证

Codepen: https://codepen.io/DGRFDSGN/pen/YWgWNV

html

<div class="container">
<form id="contact" action="#">
<div>
<h3>Account</h3>
<section>
<label for="userName">User name *</label>
<input id="userName" name="userName" type="text" class="required">
<label for="password">Password *</label>
<input id="password" name="password" type="text" class="required">
<label for="confirm">Confirm Password *</label>
<input id="confirm" name="confirm" type="text" class="required">
<p>(*) Mandatory</p>
</section>
<h3>Profile</h3>
<section>
<label for="name">First name *</label>
<input id="name" name="name" type="text" class="required">
<label for="surname">Last name *</label>
<input id="surname" name="surname" type="text" class="required">
<label for="email">Email *</label>
<input id="email" name="email" type="text" class="required email">
<label for="address">Address</label>
<input id="address" name="address" type="text">
<p>(*) Mandatory</p>
</section>
<h3>Hints</h3>
<section>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section>
<h3>Finish</h3>
<section>
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
</section>
</div>
</form>
</div>

javascript

var form = $("#contact");
form.validate({
errorPlacement: function errorPlacement(error, element) {
element.before(error);
},
rules: {
confirm: {
equalTo: "#password"
}
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function(event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function(event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function(event, currentIndex) {
alert("Submitted!");
}
});

Answer 1

下面是禁用上一步

的代码

onStepChanging: function (event, currentIndex, newIndex) {
// validate only when going forward
if (currentIndex < newIndex) {
// validate form fields
var form = $(this);
form.validate({
errorClass: "error",
highlight: function (element) {
$(element).addClass("error");
},
unhighlight: function (element) {
$(element).removeClass("error");
},
// other validation settings
});
return form.valid();
}
// ignore validation when going back
else {
$(this).validate().settings.ignore = ".ignore-validation";
return true;
}
}

Answer 2

你可以通过修改你的onStepChanging来允许进入上一步而不需要验证事件。下面是一个示例代码:

$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex)
{
// Always allow step back to the previous step even if the current step is not valid!
if (currentIndex > newIndex)
{
return true;
}
...
}
});