formProgressBar.jquery.js

$.fn.formProgressBar = function(options) {

    var defaults = {
        readCount: false,
        validClass: 'valid',
        invalidClass: 'error',
        percentCounting: false,
        transitionTime: 0,
        height: 10,
        transitionType: 'ease', //ease, linear, ease-in, ease-out, ease-in-out
        parentElement: "body"
    };

    var settings = $.extend( {}, defaults, options );

    $(settings.parentElement).prepend("<div id='jQueryProgressFormBar'><div></div></div>")
    $("#jQueryProgressFormBar").css("position","fixed").css("top",0).css("left",0).css("width","100%").css("height",settings.height).css("z-index",10000)
    $("#jQueryProgressFormBar>div").css({
        WebkitTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType,
        MozTransition    : 'all '+settings.transitionTime+'ms '+settings.transitionType,
        MsTransition     : 'all '+settings.transitionTime+'ms '+settings.transitionType,
        OTransition      : 'all '+settings.transitionTime+'ms '+settings.transitionType,
        transition       : 'all '+settings.transitionTime+'ms '+settings.transitionType
    }).css("height",settings.height);

    this.elementsRequied = function () {
        var formElements = $(this).find("input[required], textarea[required], select[required]").toArray()
        arr = [];
        formElements.map(function (item) {

            arr[item.name] = 0;
            if(item.checked)
                arr[item.name] = 1;
        })
        return arr;
    }
    this.refresh = function () {
        formFields = this.elementsRequied();
    }
    this.renderBar = function () {
        var correctFields = 0
        var length = 0;
        var error = false;

        for(var item in formFields){
            if(formFields[item]==1){
                correctFields++;
            }
            if(formFields[item]==-1)
                error=true;
            length++;
        }

        var percentOfSuccess = (correctFields/length*100).toFixed(2);
        if(settings.percentCounting)
            $("#jQueryProgressFormBar>div").text(Math.round(percentOfSuccess)+" %")
        $("#jQueryProgressFormBar>div").css("width",percentOfSuccess+"%")
        if(error==true)
            $("#jQueryProgressFormBar>div").addClass('warn')
        else
            $("#jQueryProgressFormBar>div").removeClass('warn').removeClass('error')

    }
    //element when readCount is false
    this.countElementsDefaults = function (elem, initFnc = false) {



        switch ($(elem).prop('nodeName')){
            case "INPUT":
                switch ($(elem).attr("type")){
                    case "text":
                        if($(elem).val()==""&&initFnc){
                            formFields[$(elem).attr("name")]=0
                        } else if($(elem).val()!=""){
                            formFields[$(elem).attr("name")]=1
                        }else{
                            formFields[$(elem).attr("name")]=-1
                        }
                        break;
                    case "email":
                        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

                        if($(elem).val()==""&&initFnc){
                            formFields[$(elem).attr("name")]=0
                        } else if(re.test(String($(elem).val()).toLowerCase())){
                            formFields[$(elem).attr("name")]=1
                        }else{
                            formFields[$(elem).attr("name")]=-1
                        }
                        break;
                    case "number":

                        if($(elem).val()==""&&initFnc){
                            formFields[$(elem).attr("name")]=0
                        } else if($.isNumeric($(elem).val())){
                            formFields[$(elem).attr("name")]=1
                        }else{
                            formFields[$(elem).attr("name")]=-1
                        }
                        break;
                    case "checkbox":
                        if(!$(elem).is(':checked')&&initFnc){
                            formFields[$(elem).attr("name")]=0
                        }else if($(elem).is(':checked')){
                            formFields[$(elem).attr("name")]=1
                        }else{
                            formFields[$(elem).attr("name")]=-1
                        }
                        break;
                    case "radio":
                        if(!$(elem).is(':checked')&&initFnc){
                            formFields[$(elem).attr("name")]=0
                        }else if($(elem).is(':checked')){
                            formFields[$(elem).attr("name")]=1
                        }else{
                            formFields[$(elem).attr("name")]=-1
                        }
                        break;
                }
                break;
            case "SELECT":

                if($(elem).val()==""&&initFnc){
                    formFields[$(elem).attr("name")]=0
                } else if($(elem).val()!=""){
                    formFields[$(elem).attr("name")]=1
                }else{
                    formFields[$(elem).attr("name")]=-1
                }
                break;

        }
    }
    this.bindElements = function () {
        var editBar = this.renderBar
        var countElementsDefaults = this.countElementsDefaults
        $(this).find("input[required], textarea[required], select[required]").change(function () {
            if(!settings.readCount){
                countElementsDefaults(this)
            }else{
                switch ($(this).attr("type")){
                    case "checkbox":
                        if($(this).is(':checked')){
                            formFields[$(this).attr("name")]=1
                        }else{
                            formFields[$(this).attr("name")]=-1
                        }
                        break;
                    case "radio":
                        if($(this).is(':checked')){
                            formFields[$(this).attr("name")]=1
                        }else{
                            formFields[$(this).attr("name")]=-1
                        }
                        break;
                }

                var $div = $(this).find("input[required], textarea[required], select[required]");
                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (mutation) {
                        if (mutation.attributeName === "class") {
                            if ($(mutation.target).hasClass(settings.validClass)) {
                                formFields[$(mutation.target).attr("name")] = 1
                            } else if ($(mutation.target).hasClass(settings.invalidClass)) {
                                formFields[$(mutation.target).attr("name")] = -1
                            }
                            editBar();
                        }
                    });
                });
                $div.map(function (item) {
                    observer.observe($div[item], {
                        attributes: true
                    });
                })
            }

            editBar();
        });
        $(this).submit(function (e) {
            if($("#jQueryProgressFormBar>div").hasClass('warn')){
                $("#jQueryProgressFormBar>div").removeClass("warn").addClass("error")
                e.preventDefault()
                return
            }
            var correctFields = 0

            for(var item in formFields){
                if(formFields[item]==1){
                    correctFields++;
                }
                length++;
            }
            if(correctFields!=length){
                $("#jQueryProgressFormBar>div").removeClass("warn").addClass("error")
                e.preventDefault()
                return
            }

            $("#jQueryProgressFormBar>div").removeClass("warn").removeClass("error")


        })
    }

    this.initStart = function () {

        formFields = this.elementsRequied();



        this.bindElements()

        var countElementsDefaults = this.countElementsDefaults
        var renderBar = this.renderBar

        if(!settings.readCount){
            $(this).find("input[required], textarea[required], select[required]").each(function (e) {
                countElementsDefaults(this, true)
                renderBar()
            })
        }else{
            $(this).find("input[required], textarea[required], select[required]").each(function (e) {
                    if($(this).hasClass(settings.validClass)){
                        formFields[$(this).attr("name")] = 1
                    }else if($(this).hasClass(settings.invalidClass)){
                        formFields[$(this).attr("name")] = -1
                    }else{
                        formFields[$(this).attr("name")] = 0
                    }
                });
            renderBar();
        }
    }
    var formFields
    this.initStart()
    return this;
};

$.fn.formProgressBar