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

Categories: Download dan Tutorial
Tags: PHP, CSS

About Author

Super Administrator

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

0 Comments

Write a Comment

Your e-mail address will not be published.
Required fields are marked*