Scribd Logo
Upload

Welcome to Scribd!

  • New Text Document

    Uploaded by

    hello.ass.hoole
    4 views2 pages
    This document configures a multi-step wizard using the jQuery steps plugin. It defines 4 steps with labels for next, previous, and finish buttons. On step change, it validates required fields and changes the active step indicator image. If validation passes, it allows changing to the next step; otherwise, it keeps the user on the current step.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document configures a multi-step wizard using the jQuery steps plugin. It defines 4 steps with labels for next, previous, and finish buttons. On step change, it validates required fields and changes the active step indicator image. If validation passes, it allows changing to the next step; otherwise, it keeps the user on the current step.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views2 pages

    New Text Document

    Uploaded by

    hello.ass.hoole
    This document configures a multi-step wizard using the jQuery steps plugin. It defines 4 steps with labels for next, previous, and finish buttons. On step change, it validates required fields and changes the active step indicator image. If validation passes, it allows changing to the next step; otherwise, it keeps the user on the current step.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    $(function(){

    $("#wizard").steps({
    headerTag: "h4",
    bodyTag: "section",
    transitionEffect: "fade",
    enableAllSteps: true,
    transitionEffectSpeed: 300,
    labels: {
    next: "Continue",
    previous: "Back",
    finish: 'Submit'
    },
    onStepChanging: function (event, currentIndex, newIndex) {
    let valid = true;

    if ( newIndex >= 1 ) {
    $('.steps ul li:first-child a img').attr('src','images/step-
    1.png');

    } else {
    $('.steps ul li:first-child a img').attr('src','images/step-1-
    active.png');
    }

    if ( newIndex === 1 ) {

    $('.section_1 [required]').each(function() {
    console.log($(this));
    if ($(this).is(':invalid') || !$(this).val()) {
    valid = false;
    }
    });

    if (valid) {
    $('.steps ul li:nth-child(2) a img').attr('src','images/step-2-
    active.png');
    } else {
    $('.steps ul li:first-child a img').attr('src','images/step-1-
    active.png');
    }
    //alert(valid);

    if ( newIndex === 2 ) {
    //valid = false;

    $('.section_2 [required]').each(function() {
    console.log($(this));
    if ($(this).is(':invalid') || !$(this).val()) {
    valid = false;
    }
    });

    } else {
    $('.steps ul li:nth-child(3) a img').attr('src','images/step-
    3.png');
    }
    if ( newIndex === 3 ) {
    $('.steps ul li:nth-child(4) a img').attr('src','images/step-4-
    active.png');
    $('.actions ul').addClass('step-4');
    alert(newIndex);
    } else {
    $('.steps ul li:nth-child(4) a img').attr('src','images/step-
    4.png');
    $('.actions ul').removeClass('step-4');
    }
    if (valid) {
    return true;
    }else{
    return false;
    }

    });

    You might also like