Home / Tutorial / 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.

Penyesalan akan hari kemarin, dan ketakutan akan hari esok adalah dua pencuri yang mengambil kebahagiaan saat ini.

Check Also

7 Manfaat buah lychee yang menakjubkan bagi kesehatan

7 Manfaat buah lychee yang menakjubkan bagi kesehatan

Lychee adalah buah yang indah dengan banyak manfaat kesehatan, termasuk kemampuannya untuk membantu …

0 Response

Leave a Reply

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

Subscribe To Our Newsletter

Subscribe

Kami akan membantu Anda setiap hari hingga yang tersehat.