Trying to refactor this code

Question

I am using the jQuery validation plugin and have a few forms that require different rules but instead of writing out the same code again like below

if (jQuery().validate) {
    var removeSuccessClass = function(e) {
        $(e).closest('.form-group').removeClass('has-success');
    }

    $('#validation-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: ":hidden:not(.chosen)",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);
        },

        submitHandler: function(form){
            $('#save').hide();
            $('#saving').show();
            form.submit();
        }
    });

    $('#validation-form-pdf-word').validate({
        rules: {
            file: {
                extension: "pdf|doc|docx"
            }
        },
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: ":hidden",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);
        },

        submitHandler: function(){
            $('#save').hide();
            $('#saving').show();
            form.submit();
        }
    });

    $('#validation-form-pdf').validate({
        rules: {
            file: {
                required: true,
                extension: "pdf"
            }
        },
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: ":hidden",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);
        },

        submitHandler: function(){
            $('#save').hide();
            $('#saving').show();
            form.submit();
        }

    });
}

I would like to have it so i can just pass the rest of the rules through something like this

if (jQuery().validate) {
    var removeSuccessClass = function(e) {
        $(e).closest('.form-group').removeClass('has-success');
    }

    $('#validation-form').validate({
        theRules
    });

    $('#validation-form-pdf-word').validate({
        rules: {
            file: {
                extension: "pdf|doc|docx"
            }
        },
        theRules
    });
}

score 0 · Accepted Answer · edited May 23 '17 at 12:28

You cannot call .validate() multiple times on the same form. It's used once for initialization of the plugin on the form and any subsequent call is ignored.

If you're trying to consolidate common options into one object for use in multiple forms, then use the .setDefaults() method.

jQuery.validator.setDefaults({
    rules: {
        ....
    },
    messages: {
        ....
    },
    // other options, etc.
});

Documentation

Otherwise, you can simply assign your common rules into variables and use them like this...

var theRules = {
    required: true,
    number: true
};


$('#validation-form').validate({
    rules: {
        fieldname: theRules
    }
});

$('#validation-form-pdf-word').validate({
    rules: {
        file: {
            extension: "pdf|doc|docx"
        },
        anotherfield: theRules
    }
});

Reference option 2 here: https://stackoverflow.com/a/9461732/594235

DEMO: http://jsfiddle.net/K37jL/

EDIT based on comments:

jQuery.validator.setDefaults({
    // all options, etc.  - highlight, success, submitHandler, etc.
});

$('#validation-form').validate({
    // your rules for this form
});

$('#validation-form-pdf-word').validate({
    // your rules for this form
});

I only ever call it once. Those are for different forms on different pages. One page will have a regular form and another may have images to check. I think i used a bad example there. The rules will change but the process from errorElement down to the submit handler will remain the same — Pierce McGeough, Nov 21 '13 at 17:25
@PierceMcGeough, I can only go from what you've asked and shown. My second example will give you great flexibility in assigning rules. However, if all options stay the same, then use `.setDefaults()` for those. Then only put the rules in the individual `.validate()` calls. — Sparky, Nov 21 '13 at 17:30

Trying to refactor this code

1 Answers1