Disable Validation On clicking previous JQuery stpes

Question

I am using jquery validate and jquery steps togather, it works fine but when i do previous it ask for validation of current step which i want to disable and allow user to go back without current page validation

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

Here is the code to disable on previous step

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

You can allow going to previous step without validation by modifying your onStepChanging event. Below is a sample code.

$("#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;
        }

        ...
    }
});