JQuery Validate Rule not working

Question

Fixed - see below :)

I'm using the jQuery validate plugin and for some reason I can't get it to return a valid field - always returns invalid.

http://plugins.jquery.com/project/jqueryvalidate

Here's what I have

        $(function(){
            $("#address").validate({
                valid: function(val){
                    $.getJSON("http://maps.google.com/maps/geo?q="+ escape(val) +"&key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA&sensor=false&output=json&callback=?",
                    function(data, textStatus)
                    {
                        if(data.Status.code=='200')
                        {
                            return true;
                        }else{
                            return false;
                        }
                    });

                },
                errorMessage: function(val){
                    return "must geo code";
                },
                appendCompletionIcon: true
            });
        });

I can see the GEO code requests coming back as found or not found for any particular address but the validation still fails - if I amend the function as follows I do get an alert yes or alert no in relation to a valid or invalid address but the validation still fails.

                    function(data, textStatus)
                    {
                        if(data.Status.code=='200')
                        {
                            alert('yes');
                            return true;
                        }else{
                            alert('no');
                            return false;
                        }
                    });

Any help would be appreciated

---

I found a way to hack around this, it's not extremely pretty as it takes two geo code calls to complete. Good enough for my purposes though.

var geocode = false;
function geoadd()
{
    $.getJSON("http://maps.google.com/maps/geo?q="+ $("#address").val() +"&key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA&sensor=false&output=json&callback=?",
    function(data, textStatus)
    {
        if(data.Status.code=='200')
        {
            geocode = true;
        }else{
            geocode = false;
        }
    });
}

        $(function(){
            $("#address").validate({
                valid: function(val){
                    geoadd();
                    return geocode;
                },
                errorMessage: function(val){
                    return "must not be blank";
                },
                appendCompletionIcon: true
            });
        });

Answer 1

Your validation fails regardless of ajax call status because the value returned from your valid handler is null, not true or false.

The true or false values are returned by the complete handler of the ajax which is not the same as returning true/false value from your valid function.

To solve this issue you would have to either make a synchronous ajax call (I wouldn't recommend it since it locks-up user interface while waiting for the response) or change your validation plugin for some other that supports validation using ajax calls.