Converting mootools script to Jquery

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Converting mootools script to Jquery

CogHG
Hi all,

I need to convert the following script from Mootools to Jquery. Its a form validator plugin from Jquery frame work. My requirement is to convert this script to jquery. though there are many plugins available in Jquery am required to do this conversion. Am bit new to Jquery not familiar with Mootools also

I got HJS plugin from Jquery library and incorporated it and did some changes to the below script, but still have it is not working

though i have pasted the whole bunch of code, it will be great if i get help some of methods.

Any help will be appreciated.
/*************************************************************/
        var registrationFormCheck = $.Class.create({
        options : {
                alerts : {
                        required: "required",
                        alpha: "alpha",
                        firstname_required: "Please enter your first name",
                        firstname_alpha: "First name accepts alphabetic characters only",
                },
                regexp : {
                        required : /[^.*]/,
                        alpha : /^[a-z '\-_]+$/i,
                        city : /^[a-z '\_.]+$/i,
                        alphanum : /^[a-z0-9 ._-]+$/i,
                        digit : /^[-+]?[0-9]+$/,
                        nodigit : /^[^0-9]+$/,
                        number : /^[-+]?\d*\.?\d+$/,
                        email : /^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i,
                        zipcode : /^\d{5}([\-]\d{4})?$/,
                        phone : /^\(?[1-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/,
                        url : /^(http|https|ftp)\:\/\/[a-z0-9\-\.]+\.[a-z]{2,3}(:[a-z0-9]*)?\/?([a-z0-9\-\._\?\,\'\/\\\+&%\$#\=~])*$/i
                }
        },

        initialize : function (form, options){
                if (this.form = $(form)) {
                        this.form.isValid = true;
                        this.regex = ['length'];
                        this.alertMsg = [];
                        this.validations = [];
                        var regex = new Hash(this.options.regexp);
                        regex.each(function(el, key) {
                                this.regex.push(key);
                        }, this);
                       
                        var alertMsg = new Hash(this.options.alerts);
                        alertMsg.each(function(el, key) {
                                this.alertMsg.push(key);
                        }, this);
                        $(form).find("*[class*=validate]").each(function(el) { //edits stops here,...
                                this.register(el);
                        }, this);
                }
        },
       
        register : function(el) {
                el.validation = [];
                el.getProperty("class").split(' ').each(function(classX) {
                        if(classX.match(/^validate(\[.+\])$/)) {
                                var validators = eval(classX.match(/^validate(\[.+\])$/)[1]);
                                for(var i = 0; i < validators.length; i++) {
                                        el.validation.push(validators[i]);
                                        if (validators[i].match(/^confirm\[/)) {
                                                var field = eval(validators[i].match(/^.+(\[.+\])$/)[1].replace(/([A-Z0-9\._-]+)/i, "'$1'"));
                                                if (this.form[field].validation.contains('required')){
                                                        el.validation.push('required');
                                                }
                                        }
                                }
                                this.addListener(el);
                        }
                }, this);
        },
       
        addListener : function(el) {
                this.validations.push(el);
                el.errors = [];
               
                el.addEvent('blur', function(){
                        this.validateOnBlur(el);
                }.bind(this));
               
        },
       
        trim : function(value) {
                return this.LTrim(this.RTrim(value));
        },
        LTrim : function(value) {
                var re = /\s*((\S+\s*)*)/;
                return value.replace(re, "$1");
        },
        RTrim : function(value) {
                var re = /((\s*\S+)*)\s*/;
                return value.replace(re, "$1");
        },
       
        validate : function(el) {
                el.errors = [];
                el.isOk = true;
                el.value = this.trim(el.value);
               
                el.validation.each(function(rule) {
                       
                        if(this.isChildType(el)) {
                                if (this.validateGroup(el) == false) {
                                        el.isOk = false;
                                }
                        } else {
                                var ruleArgs = [];
                                var ruleMethod;
                                if(rule.match(/^.+\[/)) {
                                        ruleMethod = rule.split('[')[0];
                                        ruleArgs = eval(rule.match(/^.+(\[.+\])$/)[1].replace(/([A-Z0-9\._-]+)/i, "'$1'"));
                                } else ruleMethod = rule;
                                                               
                                if (this.regex.contains(ruleMethod) && el.get('tag') != "select") {
                                        if (this.validateRegex(el, ruleMethod, ruleArgs) == false) {
                                                el.isOk = false;
                                        }
                                }
                                if (ruleMethod == 'confirmMail') {
                                        if (this.validateConfirmEmail(el, ruleArgs) == false) {
                                                el.isOk = false;
                                        }
                                }
                                if (ruleMethod == 'confirm') {
                                        if (this.validateConfirm(el, ruleArgs) == false) {
                                                el.isOk = false;
                                        }
                                }
                                if (el.get('tag') == "select" || (el.type == "checkbox" && ruleMethod == 'required')) {
                                        if (this.simpleValidate(el) == false) {
                                                el.isOk = false;
                                        }
                                }
                                if(rule.match(/%[A-Z0-9\._-]+$/i) || (el.isOk && rule.match(/~[A-Z0-9\._-]+$/i))) {
                                        if(eval(rule.slice(1)+'(el)') == false) {
                                                el.isOk = false;
                                        }
                                }
                        }
                }, this);
               
                if (el.isOk) {
                        return true;
                } else {
                        return false;
                }
        },
        isChildType: function(el) {
                return ($defined(el.type) && el.type == 'radio') ? true : false;
        },
        validateGroup : function(el) {
                el.errors = [];
                var nlButtonGroup = this.form[el.getProperty("name")];
                el.group = nlButtonGroup;
                var cbCheckeds = false;
               
                for(var i = 0; i < nlButtonGroup.length; i++) {
                        if(nlButtonGroup[i].checked) {
                                cbCheckeds = true;
                        }
                }
               
                if(cbCheckeds == false) {
                        el.errors.push(this.options.alerts.radios);
                        return false;
                } else {
                        return true;
                }
        },
        validateConfirm: function(el,ruleArgs) {
                var confirm = ruleArgs[0];
                if(el.value != this.form[confirm].value){
                        var msg = this.options.alerts.confirm;
                        el.errors.push(msg);
                        return false;
                }
                return true;
        },
        validateConfirmEmail: function(el,ruleArgs) {
                var confirm = ruleArgs[0];
                if(el.value.toLowerCase() != this.form[confirm].value.toLowerCase()){
                        var msg = this.options.alerts.confirm;
                        el.errors.push(msg);
                        return false;
                }
                return true;
        },
        validateRegex : function(el, ruleMethod, ruleArgs) {
                var msg = "";
                if (ruleArgs[1] && ruleMethod == 'length') {
                        if (ruleArgs[1] == -1) {
                                this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +",}$");
                                msg = this.options.alerts.lengthmin.replace("%0",ruleArgs[0]);
                        } else if(ruleArgs[0] == ruleArgs[1]) {
                                this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +"}$");
                                msg = this.options.alerts.length_fix.replace("%0",ruleArgs[0]);
                        } else {
                                this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +","+ ruleArgs[1] +"}$");
                                msg = this.options.alerts.length_str.replace("%0",ruleArgs[0]).replace("%1",ruleArgs[1]);
                        }
                } else if (ruleArgs[0] && ruleMethod == 'length') {
                        this.options.regexp.length = new RegExp("^.{0,"+ ruleArgs[0] +"}$");
                        msg = this.options.alerts.lengthmax.replace("%0",ruleArgs[0]);
                } else {
                        msg = this.options.alerts[ruleMethod];
                }
                if (ruleArgs[1] && ruleMethod == 'digit') {
                        var regres = true;
                        if (!this.options.regexp.digit.test(el.value)) {
                                el.errors.push(this.options.alerts[ruleMethod]);
                                regres = false;
                        }
                        if (ruleArgs[1] == -1) {
                                if (el.value >= ruleArgs[0]) var valueres = true; else var valueres = false;
                                msg = this.options.alerts.digitmin.replace("%0",ruleArgs[0]);
                        } else {
                                if (el.value >= ruleArgs[0] && el.value <= ruleArgs[1]) var valueres = true; else var valueres = false;
                                msg = this.options.alerts.digitltd.replace("%0",ruleArgs[0]).replace("%1",ruleArgs[1]);
                        }
                        if (regres == false || valueres == false) {
                                el.errors.push(msg);
                                return false;
                        }
                } else if (this.options.regexp[ruleMethod].test(el.value) == false)  {
                        el.errors.push(msg);
                        return false;
                }
                return true;
        },
        simpleValidate : function(el) {
                if (el.get('tag') == 'select' && el.selectedIndex <= 0) {
                        el.errors.push(this.options.alerts.select);
                        return false;
                } else if (el.type == "checkbox" && el.checked == false) {
                        el.errors.push(this.options.alerts.checkbox);
                        return false;
                }
                return true;
        },
        reinitialize: function() {
                this.validations.each(function(el) {
                        if (el.element) {
                                el.errors = [];
                                el.isOK = true;
                        }
                }, this);
                if (this.form.element) this.form.element.empty();
                this.form.isValid = true;
        },
        validateOnBlur: function(el) {
                this.reinitialize();
                var validation = this.validateFormFields(el);
                if (validation) {
                        this.removeError(el);
                }
        },
        validateFormFields : function(el) {
                var isValid = this.validate(el);
                if ((!isValid && el.validation.flatten()[0].contains('confirm[')) || (!isValid && el.validation.contains('required')) || (!el.validation.contains('required') && el.value && !isValid)) {
                        this.showError(el);
                        return false;
                } else if (!isValid && el.validation.contains('%customDOBCheck')) {
                        this.showError(el);
                        return false;
                } else if ((isValid || (!el.validation.contains('required') && !el.value)) && el.element) {
                        this.removeError(el);
                        return true;
                }
                return true;
        },
        showError : function(obj) {
                //alert(obj.id+' -- '+obj.validation+' -- '+obj.errors);
                elId = obj.id;
                formId = this.form.id;
                $(elId).getParent().getParent().removeClass('regSuccess');
                $(elId).getParent().getParent().addClass('regError');
           
            var getErrmsg = elId+'_'+obj.errors[0];
            var formArray = ['aarpCreateReg'];
            //alert(getErrmsg)
            if (this.alertMsg.contains(getErrmsg)) {
            var errortext = document.createElement("div");
            errortext.id = elId +"ErrorText";
            if (formArray.contains(formId)) {
            if (formId == "aarpCreateReg") {errortext.className = "wid240";}
            } else {
            errortext.className = "wid480";
            }
            errortext.innerHTML = '<p class="nopad">'+ this.options.alerts[getErrmsg] +'</p>';
           
            if ($(elId+'ErrorText')) {
            $(elId+'ErrorText').destroy();
            }
    $(elId).getParent().appendChild(errortext);
            }
        },
        removeError : function(obj) {
                elId = obj.id;
                $(elId).getParent().getParent().removeClass('regError');
                if ($(elId+'ErrorText')) {
    $(elId+'ErrorText').destroy();
    }
        }
});

/**********************************************************************/