Add custom validation in SmartWizard

Question

I have below code part in SmartWizard. I want to add custom validation to each HTML controls.

  <form id="myform">
    <input type="text" name="field1" />
    <br/>
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

I have tried below code but not working.

function leaveAStepCallback(obj){
               var step_num= obj.attr('rel'); // get the current step number
        return validateSteps(step_num); // return false to stay on step and true to continue navigation 
      }

score 3 · Answer 1 · edited Apr 05 '20 at 08:36

I know this is well out of date but I am going to answer it anyway, as I found this post before doing it myself

//..init wizard
onLeaveStep: function(obj, context){ 
    //Validate the current step                                  
    var frst = "#step-"+context.fromStep;
    var container = this.elmStepContainer.find(frst);
    //container now contains everything in the box
    //you can now container.find("...") to get fields
    //and then run some regex or whatever you want to do the validation
    if(invalid_fields.length > 0){
        return false ;
    }else{ return true;}},
//...the rest of the wizard init

score 1 · Answer 2 · answered Nov 01 '16 at 10:46

This would help for others looking for the same issue, this implementation is from version 4 of the plugin. Returning false for this event method will stop the propagation of the steps and so remain on the same step with error.

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber) {
    var formElms = $(anchorObject.attr('href')).find("input, textarea");
    var hasError = false;
    $.each(formElms, function(i, elm){
        if(elm.val().length == 0){
           hasError = true;
        }
    });
    return !hasError;
});

Add custom validation in SmartWizard

2 Answers2