Jquery validation messages from xml

Question

I am using Jquery valdiation plugin for validating the form at client side. I am fetching validation error messages from an xml file.

    $("#"+form).validate({
                errorLabelContainer: "#dialogError", //msg_error
                wrapper: "li",
                rules: {
                    txtInfringementID: {
                        required: true,
                        digits: true
                    },
                    txtLicenceNumber: {
                        required: true

                    },
                    txtDateOfOffence: {
                        date: true,
                        required: true
                    }
                },
                messages: {
                    txtInfringementID: {
                        required:this.errorMessage("InfringementID","Required"),
                        digits: "Inf Id must be numeric only"
                    },
                    txtDateOfOffence: {
                        required: "please enter date of offence",
                        date: "Date is not valid"
                    },
                    txtLicenceNumber:this.errorMessage("LicenceNumber", "Required"),
                    txtSurname: this.errorMessage("DebtorSurname", "Required")
                }
)};

errorMessage function is below.

this.errorMessage = function (Field, Rule) {

    var message;
    $.ajax({
        type: "GET",
        url: "../../../ErrorMessages.xml",
        dataType: "xml",
        success: function (xml) {

            $(xml).find("*[Name='" + Field + "']").each(function () {
                message = $(this).find(Rule).text();
            });
        }
    });

    return message; **//I am using a debugger here**
}

and the xml I am using is

<?xml version="1.0" encoding="utf-8" ?>
<ErrorMessage>
    <Field Name="InfringementID">
        <Required>Infringement ID is required</Required>
        <Digit>Infringement ID should be numeric only</Digit>
    </Field>
    <Field Name="LicenceNumber">
        <Required>License Number is Mandatory</Required>
    </Field>
    <Field Name="DebtorSurname">
        <Required>Debtor Surname is Mandatory</Required>
    </Field>
</ErrorMessage>

But the problem is that when I use debugger, I am getting messages from xml. If I don't use debugger, I am getting default message 'this field is required'. I think, the issue is this.errorMessage() is a asynchrounous request and this request is taking some time to complete. I tried to put some delay using setTimeout function. but I don't know where to put the time delay. Any thought process is welcomed.

I am setting timeout like this.

required:setTimeout(this.errorMessage("InfringementID","Required"),10000),

Answer 1

errorMessage starts the ajax-call and returns directly after that without waiting for the response. Because of that message will be null all the time. Your approach with setTimeout only delays the call of errorMessage. The result will be the same as without it. Make your ajax-call synchronous and thereby wait for the result of it.

$.ajax({
    type: "GET",
    async: false,     // wait for the response
    url: "../../../ErrorMessages.xml",
    dataType: "xml",
    success: function (xml) {
        $(xml).find("*[Name='" + Field + "']").each(function () {
            message = $(this).find(Rule).text();
        });
    }
});

---

Edit I don't exactly know what you are asking for, but I will give it a try... Because of the last line of your question above, perhaps the following part will do it for you

required: function() {
    setTimeout(this.errorMessage("InfringementID", "Required"), 10000);
}