Multistep form dengan progress bar dan validasi

Multistep form dengan progress bar dan validasi

Tutorial kali ini adalah membuat script form dengan PHP dan jquery sederhana, sebelum memulai pastikan anda sudah memiliki Apache, PHP, MySQL bila belum install terlebih dahulu, bisa menggunakan xampp atau wampserver

Posting ini dilengkapi dengan beberapa perubahan UI dan paling penting, terintegrasi jquery form validation plugin.

Script dengan desain bootstrap ui, yang mungkin membingungkan. Di sini saya posting script yang Anda dapat menyalin dan mengubah sesuai kebutuhan Anda dan tinggal download.

Basic  script

$(document).ready(function(){
        var current = 1;
        
        widget      = $(".step");
        btnnext     = $(".next");
        btnback     = $(".back"); 
        btnsubmit   = $(".submit");

        // Init buttons and UI
        widget.not(':eq(0)').hide();
        hideButtons(current);
        setProgress(current);

        // Next button click action
        btnnext.click(function(){
            if(current < widget.length){
                // Check validation
                if($(".form").valid()){
                    widget.show();
                    widget.not(':eq('+(current++)+')').hide();
                    setProgress(current);
                }
            }
            hideButtons(current);
        })

        // Submit button click
        btnsubmit.click(function(){
            alert("Submit button clicked");
        });


        // Back button click action
        btnback.click(function(){
            if(current > 1){
                current = current - 2;
                if(current < widget.length){
                    widget.show();
                    widget.not(':eq('+(current++)+')').hide();
                    setProgress(current);
                }
            }
            hideButtons(current);
        })

        $('.form').validate({ // initialize plugin
            ignore:":not(:visible)",            
            rules: {
                name     : "required",
                email    : {required : true, email:true},
                city     : "required",
                username : "required",
                password : "required",
                rpassword: { required : true, equalTo: "#password"},
            },
        });

    });

Download

Share This Post

Post Comment