Wednesday, January 23 2019
News
Home / Template / 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



Subscribe to our e-mail newsletter to get interesting stuff receive updates.

Rate this article


User Rating: ( votes)
Regret of the day and yesterday, and the fear of tomorrow are two thieves who take happiness today.

Check Also

13 Manfaat Luar Biasa dari Minyak Akar Jahe

13 Manfaat Luar Biasa dari Minyak Akar Jahe

Manfaat kesehatan dari minyak akar jahe dapat dikaitkan dengan sifat pencernaannya, karminatif, …

0 Response

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Get our wellness newsletter

Food and nutrition tips, health news, and more.