How to detect that unobtrusive validation has been successful?

Question

I have this code that triggers when a form is submitted:

$("form").submit(function (e) {
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById("Address").value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("#LatitudeLongitude").val(results[0].geometry.location);
            $("form").submit();
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    $('form').unbind('submit');
    return false;
});

What it does: it calls google geocoding service to translate an address into latitude/longitude which is set into a hidden field of the form. If there is a result, then the form is submitted.

The problem is that if validation fails (for instance a required field has not been set) then the call to geocoding is still made. Moreover, if I click a second time on the submit button, even if the required field has not been set, the form is posted.

How can I call the geocoding service only if the unobtrusive validation has been successful?

Heretic

Answer 1

Rather than attaching to the submit() event, you need to capture an earlier event, and exercise control over how to proceed.

First, let's assume your original button has an id of submit and you create a new submit button with an id of startSubmit. Then, hide the original submit button by setting the HTML attribute display="false". Next, bind to the click event of your new button, and add your code, as modified:

$("#startSubmit").live("click", function() {
    // check if the form is valid
    if ($("form").validate().form()) {
        // valid, proceed with geocoding
        var geocoder = new google.maps.Geocoder();
        var address = $("#Address").val();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                $("#LatitudeLongitude").val(results[0].geometry.location);
            } 
            else {
                alert("Geocode was not successful for the following reason: " + status);
            }
            // proceed to submit form
            $("#submit").click();
        }
    }
    return false;
});

This will invoke validation, so that geocoding will only occur if the form is valid, then, after geocoding has returned a response, it will submit the form by incoking the click event on the submit button.

Manon

A pity that it needs 2 buttons, but it seems the way to go. Thx. – Heretic

At least ony one button will show. If this was helpful, please mark as answered. Thanks. – Manon

Please could you update to reflect that live was depreciated as of jQuery 1.7 and use on instead? Thanks :) – Electromotive

Answer 2

I implemented something similar (with thanks to cousellorben), in my case I wanted to disable and change the text of the submit button but only on success. Here's my example:

$("#btnSubmit").live("click", function() {
    if ($("form").validate().form()) {
        $(this).val("Please Wait...").attr("disabled", "disabled");
        $("form").submit();
        return true;
    } else {
        return false;
    }
});

The only difference is that my example uses a single button.

Defazio

Answer 3

This answer may help you, it gives a quick example of how a function is called when the form is invalid, based on the use of JQuery Validate, which is what MVC uses.

Mcelroy