keziah keziah - 8 months ago 109
PHP Question

jQuery Validation validate all steps in a multi-part form

I'm made a multi-part registration form, using jQuery Validation.
My problem is that clicking the next button in the first fieldset,
validation works fine. In the next fieldset, the active fieldset
slid up and ignores the validation, this scenario is the same as others.

$(document).ready(function () {
// All required fields
var fields = [
package: 'required'
fname: 'required',
lname: 'required'

// Messages
var msgs = [
package: 'Please select your package.'
fname: 'Please enter your first name.',
lname: 'Please enter your last name.'

// Get the index of the active fieldset
var active = $('').index() - 1;

// I want only single method for the next button
$('.next').click(function () {
ignore: [],
rules: fields[active],
messages: msgs[active]

if ($('#register').valid()) {
// Set the current fieldset as inactive

// Not this
$('.next').eq(0).click(function () {
// same contents

$('.next').eq(1).click(function () {
// same contents

$('.next').eq(2).click(function () {
// same contents

// ...

<form id="register" method="post">
<fieldset class="active"> <!-- Set as active by default -->
<legend>Select your package</legend>
<select name="package">
<option value="" selected>Select</option>
<option value="basic">Basic</option>
<option value="pro">Pro</option>
<option value="premium">Premium</option>
<option value="elite">Elite</option>
<input type="button" class="next" value="Next" />
<legend>Your personal info</legend>
<input type="text" name="fname" placeholder="First name" />
<input type="text" name="lname" placeholder="Last name" />
<!-- More fieldsets -->

I only want to validate per fieldset upon clicking the next button

Ideas will be greatly appreciated. Thanks!


Try this, bootstrap-multi-step-registration-form.

View the page-source with ctrl+u for idea of the code.