如何检测不引人注目的验证是否成功？

Question

我有这个代码在提交表单时触发:

$("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;
});

它的作用:它调用谷歌地理编码服务将地址转换为纬度/经度,该纬度/经度被设置为表单的隐藏字段.如果有结果,则提交表单.

问题是如果验证失败(例如,尚未设置必填字段),则仍会进行地理编码调用.此外,如果我在提交按钮上再次单击,即使尚未设置必填字段,也会发布表单.

如果不引人注目的验证成功,我该如何调用地理编码服务？

Answer 1

submit()您需要捕获较早的事件,并控制如何继续,而不是附加到事件.

首先,假设你的原始按钮的id为submit,你创建一个id为的新提交按钮startSubmit.然后,通过设置HTML属性隐藏原始提交按钮display="false".接下来,绑定到click新按钮的事件,并添加您的代码,如下所示:

$("#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;
});

这将调用验证,因此只有在表单有效时才会发生地理编码,然后,在地理编码返回响应后,它将通过在提交按钮上触发click事件来提交表单.