2

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.

Fiddle

$(".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>
Sparky
  • 98,165
  • 25
  • 199
  • 285
Maximilian Neuse
  • 153
  • 1
  • 5
  • 15
  • Do not call the `.validate()` method inside of the click handler. Otherwise, look at the code in the duplicates posted above the question. – Sparky Sep 18 '19 at 14:40
  • @sparky how do you do it then? Agreed step 1 validates but step 2 and 3 don't. – Corey Oct 22 '20 at 21:56
  • @Cory - read the documentation and click on the duplicate links above. Once the `.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. – Sparky Oct 22 '20 at 22:30

0 Answers0