CODEWITHSUNDEEP
jqueryhtmlsmart-wizard
awsm sid
awsm sid

Reputation: 595

jQuery Smart Wizard Step Verification

I am using jQuery Smart Wizard to save a form on each step, I have some input fields. I want to validate each field before going to the next step. please help me how can I achieve it.

Here is my jQuery:

$('#smartwizard').smartWizard({ 
    selected: 0, 
    theme: 'default',
    transitionEffect:'fade',
    showStepURLhash: true,
    toolbarSettings: {toolbarPosition: 'bottom',
    toolbarExtraButtons: [btnFinish, btnCancel]
    }
});

Upvotes: 0

Views: 8088

Answers (1)

Pratik Gadoya
Pratik Gadoya

Reputation: 1511

you can cheque that form is valid or not while clicking on next step.

$(document).ready(function() {
    $('#smartwizard').smartWizard({ 
        onLeaveStep:leaveAStepCallback,
        onFinish:onFinishCallback
    });

    $("form").validate({
        rules: {
            'student[business_representative_attributes][first_name]': 'required'
        },
        messages: {
            'student[business_representative_attributes][first_name]': 'Please enter first name'
        }
    });
});

function leaveAStepCallback(obj, context){
    alert("Leaving step " + context.fromStep + " to go to step " + context.toStep);
    // return false to stay on step and true to continue navigation 
    if ($('form').valid()) {
        return true;
    } else {
        return false; 
    }
}

Smart Wizard 4

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
     return confirm("Do you want to leave the step "+stepNumber+"?");
});

Upvotes: 1

Related Questions