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;
});

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

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

如果不引人注目的验证成功，我怎样才能调用地理编码服务？

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事件来提交表单。

Answer 2

我实现了类似的东西（感谢cousellorben），在我的情况下，我想禁用和更改提交按钮的文本，但仅限于成功。这是我的例子：

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

唯一的区别是我的示例使用了一个按钮。

Answer 3

这个answer可以帮到你，它提供了一个快速的例子，说明在表单无效时如何调用函数，这是基于使用JQuery Validate，这是MVC使用的。

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

3 个答案: