Include js withing JQueryValidation

Question

I am using jQuery Validation in my application. but now we are planning to declare all the error message variables in separate file(ErrMsgs.js) and use these variable in place of error msgs in JQuery Validation Plugin(jquery.validate.min.js).

Some How i need to include the ErrMsgs.js file in jquery.validate.min.js file, so that i can make use of Variable declared in ErrMsgs.js

I used below script in jquery.validate.min.js

loadJavaScriptFile("Scripts/ErrMsgs.js");

function loadJavaScriptFile(jspath) {
     document.write('<script type="text/javascript" src="' + jspath + '"><\/script>');
}

but i am unable to use the variables declared in ErrMsgs.js.

Please suggest me the Solution.

Thanks.

Answer 1

You can use a javascript loader such as http://requirejs.org/ or http://www.andresvidal.com/jsl. If you prefer a jQuery one then I just found this http://api.jquery.com/jQuery.getScript/, it uses the jQuery ajax call but parses the result as a script on success.

Each of these allow you to execute your own code on success, so you will be able to attach it to the validator messages object, or whatever as follows (jQuery example):

$.getScript("Scripts/ErrMsgs.js", function(data, textStatus){
   $.extend(jQuery.validator.messages, myCustomErrorMessages);
});

If you try to load the script the way you are currently doing it, I don't think the browser will parse the string as javascript.

Answer 2

You can simply put the following in your ErrMsgs.js file:

$.extend(jQuery.validator.messages, {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
});

And then include it like any other JavaScript file:

<script type="text/javascript" src="ErrMsgs.js"></script>

---

EDIT:

Based on comments that these are variables that need to be used in another place, perhaps the following will work.

 var msg1 = "This field is required.",
     msg2 = "Please fix this field.",

     // etc., etc.

 $.extend(jQuery.validator.messages, {
    required: msg1,
    remote: msg2,

    //  etc. etc.

});

$.extend(jQuery.xyz.messages, {
    required: msg1,
    remote: msg2,

    //  etc. etc.

});