I have a form, split in 3 steps. It is simplified to show my problem.
Each step should be validated by it's "next" button click. I am using jQuery validate for it.
The first step works fine, but the validation of the next steps don't work anymore.
$(".slide.one .button").click(function() {
var form = $(".myform");
form.validate({
rules: {
first: {
required: true,
minlength: 6
}
},
messages: {
first: {
required: "This is required.",
minlength: "Too short."
}
}
});
if (form.valid() === true) {
$(".slide.one").removeClass("active");
$(".slide.two").addClass("active");
}
});
$(".slide.two .button").click(function() {
var form = $(".myform");
form.validate({
rules: {
second: {
required: true,
minlength: 6
}
},
messages: {
second: {
required: "This is required.",
minlength: "Too short."
}
}
});
if (form.valid() === true) {
$(".slide.two").removeClass("active");
$(".slide.three").addClass("active");
}
});html {
font-family: arial;
}
.slide {
background: rgba(0, 0, 0, 0.2);
margin: 0 0 10px 0;
padding: 20px;
display: inline-block;
opacity: 0.2;
}
.slide.active {
opacity: 1;
}
.error {
display: block;
}
.button {
background: green;
padding: 5px;
color: #fff;
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form class="myform">
<div class="slide one active">
<input name="first" />
<div class="button">Next</div>
</div>
<div class="slide two">
<input name="second" />
<div class="button">Next</div>
</div>
<div class="slide three">
<input name="third" />
<div class="button">Next</div>
</div>
</form>
.validate()method inside of the click handler. Otherwise, look at the code in the duplicates posted above the question..validate()method is called, the click of the submit button is automatically captured by the plugin. Inside of a click handler is not where it goes. Anyway, way too much for a comment when you can refer to examples above and documentation.