How To Step By Step Validtion Using jqBootstrapValidation()

[Anonymous]

I am using the jqBootstrapValidation() plugin for a multistep order process. It uses the jQuery validator plugin built in, which is working fine when going from step to step.

I Have 3 Step form to get information, in Step 1 inputs fill from DB and now need to validation, In Step 2 i create 4 inputs, this inputs most be validated on click "Next" but when Next button Clicked , wizard go to Step 3!

My Code:

$(document).ready(function () {
const checkButtons = (activeStep, stepsCount) => {
    const prevBtn = $("#wizard-prev");
    const nextBtn = $("#wizard-next");
    const submBtn = $("#submit-btn");

    switch (activeStep / stepsCount) {
        case 0: // First Step
            prevBtn.hide();
            submBtn.hide();
            nextBtn.show();
            break;
        case 1: // Last Step
            nextBtn.hide();
            prevBtn.show();
            submBtn.show();
            break;
        default:
            submBtn.hide();
            prevBtn.show();
            nextBtn.show();
    }
};

const scrollWindow = (activeStepHeight, viewHeight) => {
    if (viewHeight < activeStepHeight) {
        $(window).scrollTop($(steps[activeStep]).offset().top - viewHeight / 2);
    }
};

const setWizardHeight = activeStepHeight => {
    $(".wizard-body").height(activeStepHeight);
};

$(function () {
    const wizardSteps = $(".wizard-header .wizard-step");
    const steps = $(".wizard-body .step");
    const stepsCount = steps.length - 1;
    const viewHeight = $(window).height();
    let activeStep = 0;
    let activeStepHeight = $(steps[activeStep]).height();

    checkButtons(activeStep, stepsCount);
    setWizardHeight(activeStepHeight);

    $(window).resize(function () {
        setWizardHeight($(steps[activeStep]).height());
    });

    $("#wizard-prev").click(() => {
        $(steps[activeStep]).removeClass("active");
        $(wizardSteps[activeStep]).removeClass("active");

        activeStep--;

        $(steps[activeStep]).removeClass("off").addClass("active");
        $(wizardSteps[activeStep]).addClass("active");

        activeStepHeight = $(steps[activeStep]).height();
        setWizardHeight(activeStepHeight);
        checkButtons(activeStep, stepsCount);
    });

    $("#wizard-next").click(() => {
        var service = jQuery('#service').val();
        var result_service = service.replace(/[^a-zآ-ی ]/gi, '');
        if (result_service) {
            $('#service_print').text(result_service);
        } else {
            $('#service_print').text("---");
        }

        var type = jQuery('#type').val();
        var result_type = type.replace(/[^a-zآ-ی ]/gi, '');
        if (result_type) {
            $('#type_print').text(result_type);
        } else {
            $('#type_print').text("---");
        }

        var first_name = jQuery('#firstname').val();
        var last_name = jQuery('#lastname').val();
        var result_name = first_name.replace(/[^a-zآ-ی ]/gi, '');
        var result_last = last_name.replace(/[^a-zآ-ی ]/gi, '');
        if (result_name && result_last) {
            $('#name_print').text(result_name + ' ' + result_last);
        } else {
            $('#name_print').text("---");
        }

        var email = jQuery('#email').val();
        var result_email = email.replace(/[^0-9a-z.@\-_]/gi, '');
        if (result_email) {
            $('#email_print').text(result_email);
        } else {
            $('#email_print').text("---");
        }

        var tel = jQuery('#tel').val();
        var result_tel = tel.replace(/[^0-9]/gi, '');
        if (result_tel) {
            $('#tel_print').text(result_tel);
        } else {
            $('#tel_print').text("---");
        }

        $(steps[activeStep]).removeClass("inital").addClass("off").removeClass("active");
        $(wizardSteps[activeStep]).removeClass("active");

        activeStep++;

        $(steps[activeStep]).addClass("active");
        $(wizardSteps[activeStep]).addClass("active");

        activeStepHeight = $(steps[activeStep]).height();
        setWizardHeight(activeStepHeight);
        checkButtons(activeStep, stepsCount);
    });
});

$(document).ready(function () {

    $('#order_form input').jqBootstrapValidation({
        preventSubmit: true,
        submitSuccess: function($form, event){
            event.preventDefault();
            $this = $('#submit-btn');
            $this.prop('disabled', true);
            $this.html('<span>Inprocess</span>');
            var form_data = $("#order_form").serialize();
            $.ajax({
                url:"inc/mail/sendmail.php",
                method:"POST",
                data:form_data,
                success:function(){
                    $this = $('#order_form');
                    $('#success').html("<strong>Success</strong></div>");
                    $('#submit-btn').html('submit');
                    $this.trigger('reset');
                    $this.hide("slow");
                    setTimeout(function(){
                    $('#order_area').hide("slow");
                    }, 5000);
                },
                error:function(){
                    $('#error').html("error");
                    $('#submit-btn').html('submit');
                },
                complete:function(){
                    setTimeout(function(){
                        $this.prop("disabled", false);
                        $('#submit-btn').html('submit');
                        $('#error').html('');
                    }, 5000);
                }
            });
        },
    });