Question

I’m trying to use the Jquery builtin validator on my page. The issue is that I have certain fields that only are required if the JobID (entered into another field) does not already exist in our database. I have a simple service which simply takes JobID and returns True or False based on whether the JobID exists, but I can’t seem to get this information where I want it. Some sample code:

$("#dep_form").validate({
        rules: {
            JobID: {
                required: true,
                digits: true,
                minlength: 3
            },
            OrgName: {
                required: function(element) { //This field is required if the JobID is new.
                    return $("#jobinfo").html().length==15; }
            }
        },
        messages: {
            JobID: {
                required: "Enter a Job Number.",
                digits: "Only numbers are allowed in Job ID's.",
                minlength: "Job Number must be at least 3 digits"
            },
            OrgName: {
                required: "Select a Practice from the dropdown list."
            }
        },
        errorClass: "ui-state-error-input",
    errorLabelContainer: "#errorbox",
    errorElement: 'li',
    errorContainer: "#validation_errors",
    onfocusout: false,
    onkeyup: false,
    focusinvalid: false
};

Currently, I’m using a lazy method to validate (shown above). However, I now have access to a service using the URL:

var lookupurl = "/deposits/jobidvalidate/?q=" + $("#id_JobID").val() + "&t=" + new Date().getTime();

which is a page which will contain just the word True or False based on whether that given JobID exists. I’ve tried half a dozen different ways of setting variables and calling functions within functions and still cannot get a way to simply return the value of that page (which I’ve been trying to access with $.get() ) to my validator, so that required is set to true when the Job does not exist and false if the job already exists. Any suggestions? Thanks.

Answer 1

It sounds like you’re using an asynchronous Ajax request (the $.get). My guess is your code looks something like this:

var result;

$.ajax({
    url: lookupurl,
    success: function() { result = /* parse the response here */; },
    dataType: 'html'
});

return result;

But this won’t work because result will be returned before the success callback has fired (and in doing so, set the value of result). If my guess is right, then you need to make your $get synchronous, but you do have to use $.ajax to do so.

Edit @Pointy: $.get is, according to the API, shorthand for

$.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
});

…which is, by default, asynchronous.