Using regular button to validate form with ParsleyJS (not "input" type button)

Question

I'm still learning about jQuery and html forms but I'll try my best to explain my problem. I'm using ParsleyJS to validate my inputs and it is working great so far.

The problem I have is my form is in many small parts and I would like to validate each parts one at the time using a button without necessarily submitting everything. But I realized that by default, Parsley will only listen to the type="submit" button which systematically submits.

Here is an example of my code I would like to work:

<form class="icheck_form">
            <div class="inputs">
              <label for="my_input_1">
                <input type="radio" id="my_input_1" name="iCheck" data-parsley-multiple="my_input_group">
                Option 1</label>
              <label for="my_input_2">
                <input type="radio" id="my_input_2" name="iCheck" data-parsley-multiple="my_input_group">
                Option 2</label>
              <label for="my_input_3">
                <input type="radio" id="my_input_3" name="iCheck" data-parsley-multiple="my_input_group" data-parsley-mincheck="1" data-parsley-error-message="You need to check something." required>
                Option 3</label>
            </div>
            <button class="next" type="button" onclick="">Next</button>
          </form>

As you see, if nothing is checked, it should display "You need to check something.". And it does when I use a "submit" button with "data-parsley-validate" in my code.

But how to make it work with the current code (using type="button")?

Any help is much welcome! Thanks

Answer 1

Parsley2 has a data-parsley-group feature that you could leverage in your multiple steps form case.

If you add a data-parsley-group="step1" on all your step1 inputs, and then do when you click on next (you'll need to bind this button to 'click' event), simply do $('#yourform').parsley().validate('step1') and check if true or false to go on next step.

I'll try to add this kind of example in the documentation soon.

EDIT: Tadaa http://parsleyjs.org/doc/examples/multisteps.html

Best