0

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]
    }
});
Sam Bunting
  • 845
  • 1
  • 15
  • 36
awsm sid
  • 595
  • 11
  • 28

1 Answers1

1

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+"?");
});
Pratik Gadoya
  • 1,420
  • 1
  • 16
  • 27
  • Thanx for help pratik but its not working what is 'username' is it the name of field? i have a field named 'student[business_representative_attributes][first_name]' how will i validate it? – awsm sid Nov 25 '17 at 06:11
  • Username is just an example. You can use fields there. I have used username because I don't have your form fields. – Pratik Gadoya Nov 25 '17 at 06:25
  • $("form").validate({ rules: { 'student[business_representative_attributes][first_name]': "required" } }); This is not working. even when i am trying to debugg its not going inside 'leaveAStepCallback' function. – awsm sid Nov 25 '17 at 06:35
  • I have changed it in my answer. – Pratik Gadoya Nov 25 '17 at 06:36
  • do we need to define 'leaveAStepCallback' function? – awsm sid Nov 25 '17 at 06:37
  • No need to define function. You can write code inside function directly. But it will look good. – Pratik Gadoya Nov 25 '17 at 06:39
  • You can remove onFinish option because function for it is not defined. – Pratik Gadoya Nov 25 '17 at 06:39
  • yes i have removed it. but still i am not able to stop next step. – awsm sid Nov 25 '17 at 06:40
  • $('#smartwizard').smartWizard({ selected: 0, theme: 'default', transitionEffect:'fade', showStepURLhash: true, toolbarSettings: {toolbarPosition: 'bottom', toolbarExtraButtons: [btnFinish, btnCancel] }, onLeaveStep: leaveAStepCallback, // onFinish: onFinishCallback }); – awsm sid Nov 25 '17 at 06:41
  • $("form").validate({ rules: { 'student[business_representative_attributes][first_name]': 'required' }, messages: { 'student[business_representative_attributes][first_name]': 'Please enter first name' } }); – awsm sid Nov 25 '17 at 06:41
  • 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; } } – awsm sid Nov 25 '17 at 06:42
  • i guess onLeaveStep: leaveAStepCallback is not getting fired. i am not able to debug it any solution? – awsm sid Nov 25 '17 at 06:44
  • onLeaveStep: function(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; } }, – Pratik Gadoya Nov 25 '17 at 06:47
  • you can write like this as well. – Pratik Gadoya Nov 25 '17 at 06:47
  • hey its worked i was using smartwizard 4 but now i try samrtwizard 3 and its worked. but facing some ui issues :) – awsm sid Nov 25 '17 at 07:01
  • i cant use smartwizard 3 please help me. why onLeaveStep is not working with smart wizard 4? – awsm sid Nov 25 '17 at 07:58
  • Because in smart wizard 4 method is changed. See my updated answer. For more check this link http://techlaboratory.net/smartwizard/documentation – Pratik Gadoya Nov 25 '17 at 08:00