How to detect that an unobtrusive check was successful?

Question

I have this code that runs when the 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 he does: he calls the google geocoding service to translate the address to latitude / longitude, which is set in the hidden form field. If there is a result, then the form is submitted.

The problem is that if the check fails (for example, a required field has not been set), the geocoding call is still running. Moreover, if I click the submit button a second time, even if the required field has not been set, the form will be published.

How can I call the geocoding service only if the unobtrusive check is successful?

Answer 1

Instead of attaching to the submit() event, you need to capture an earlier event and take control over how to proceed.

First, suppose your original button has a submit identifier and you create a new submit button with the startSubmit identifier. Then hide the original submit button by setting the HTML attribute display="false" . Then bind to the click event your new button and add your code as changed:

 $("#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 trigger a check, so that geocoding will only happen if the form is correct, and after the geocoding returns a response, it will send the form by triggering a click event on the submit button.

Answer 2

I implemented something similar (thanks to cousellorben), in my case I wanted to disable and change the text of the submit button, but only with success. Here is 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 in my example one button is used.

Answer 3

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