How to validate each step in fuelux wizard using jquery-validate

Question

How can I validate each step of a fuelux wizard (when clicking next button)?

jquery code for the function is like this.

$('#myWizard').on('actionclicked.fu.wizard', function (evt, data) {
    // validation code for the step here.
    // jquery validator, AFAIK validates  only the whole form.
    // in this case, only the ancestor div

    // had tried this
    var curstep = $('#myWizard').wizard('selectedItem');
    var curstepcontainer = $(this).closest(".step-pane");

    curstepcontainer.validate();

   // and this
   if (curstep.step === 1)
   {
       $('#field1').validate();
       $('#field2').validate();
   }
});

Both didnt work.

While this approach may be a way to make it work, Is there any other ideal way to do this?

I understand from https://collegeparktutors.com/get-tutor?course_dropdown=19 that this can be done.

Have also checked out formvalidation.io (http://formvalidation.io/examples/fuel-ux-wizard/) that they have a great working code for this, which solves our issue. However, this is a commercial product, and we are exploring open source / free tools :-)

Any pointers, help, suggestions appreciated! Thanks!

score 3 · Accepted Answer · answered Jul 17 '16 at 16:58

You can use jQueryvalidation's .valid() method to validate a set of form controls. For example:

<div class="step-pane sample-pane" id="step-contact" data-step="3">
    <div class="h2 step-greeting">
        How we can contact you?<br>
        <small>We need to know so we can put you in touch with a tutor.</small>
    </div>
    <div class="container step-container-narrow">
        <label>Name</label>
        <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                    <input type="text" class="form-control" name="first_name" placeholder="First">
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                  <input type="text" class="form-control" name="last_name" placeholder="Last">
                </div>
              </div>
            </div>
        </div>
        <div class="form-group">
          <label>Email</label>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="text" class="form-control" name="email" placeholder="Please provide your email address.">
          </div>
        </div>
        <div class="form-group">
          <label>Confirm email</label>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="text" class="form-control" name="email_confirm" placeholder="Please re-enter your email address.">
          </div>
        </div>      
        <div class="form-group">
          <label>Phone (optional)</label>
          <div class="input-group optional">
            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
            <input type="text" class="form-control" name="phone" placeholder="Please provide a phone number if possible.">
          </div>
        </div>
        <div class="form-group">
          <label>Availability</label>
          <textarea class="form-control" name="availability" rows="5" placeholder="Please list days and times that you are available."></textarea>
        </div>
        <p>
            <strong>We promise not to spam you or share your information with third parties.</strong>
        </p>  
    </div>
    <div class="text-center">
        <button type="button" class="btn btn-success btn-lg btn-input-contact-info">Next <i class="fa fa-angle-right"></i></button>
    </div>
</div>

Then you would bind your .btn-input-contact-info button to a .click() handler:

// Bind next button for contact info.  Validate data, then proceed to next page only if valid
$('.btn-input-contact-info').on('click', function(){

    var form = $("form[name='new_request']");
    var fields = form.find("#step-contact").find(":input");
    if (fields.valid()) {        
        $("#request-wizard").wizard('next');
    }
});

Notice that we first partition our form into divs with distinct ids - you could put the controls for each wizard step into a separate div. To validate a particular div's controls, you grab all input elements using form.find, and then call valid() on that set.

score 0 · Answer 2 · answered Jul 22 '16 at 06:41

Taking advantage of JQuery's wildcard selection, have named the ids of buttons as 'next-1', 'next-2' and so on & ids of steps has 'step-1', 'step-2' and so on, which allows to have a single,small chunk to handle all steps.

$('[id^=next]').on('click', function () {       
    var curstep = $('#myWizard').wizard('selectedItem');
    var form = $("form[name='register']");
    var fields = form.find('#step-' + curstep.step).find(":input");
    if (fields.valid()) {
        $('#myWizard').wizard('next');
    }
 });

Just in case, some one finds it helpful :-)

How to validate each step in fuelux wizard using jquery-validate

2 Answers2