Question

I created a function:

function createValidatorForForm(id) {
    var formValidator = $(id).validate({
        errorClass:'help-inline',
        errorElement:'p',

        highlight:function (element, errorClass, validClass) {
            $(element.parentNode.parentNode).addClass('error')
        },
        unhighlight:function (element, errorClass, validClass) {
            $(element.parentNode.parentNode).removeClass('error')
        }
    });
    return formValidator;}

and then I use it in my code in the next way:

var reportValidator = createValidatorForForm("#report-form");
var areaValidator = createValidatorForForm("#area-form");
var liquidationValidator = createValidatorForForm("#liquidation-form");
var comparableValidator = createValidatorForForm("#comparable-form");

but though Firebug knows about formValidator and I can see it’s state in debugger, he alerts me that reportValidator and another three variables are undefined and I can’t use them in my code: reportValidator.form() generates an error. But validation itself works on all forms.

function saveReport() {
if (!comparableValidator.form()){return};
$.ajax({
    url : SAVE_REPORT, // + "?json=" + ko.toJSON(reportModel),
    data : {
        json : ko.toJSON(reportModel)
    }, ...

Answer 1

Change your code like this:

   reportValidator = createValidatorForForm("#report-form");
   areaValidator = createValidatorForForm("#area-form");
   liquidationValidator = createValidatorForForm("#liquidation-form");
   comparableValidator = createValidatorForForm("#comparable-form");    

Now reportValidator and other variables are global and visible outside onDocumentReady callback function. If you put a var you make variables local and available inside onDocumentReady callback function only.