如何检测不显眼的验证是否成功？答案

【问题标题】：How to detect that unobtrusive validation has been successful?如何检测不显眼的验证是否成功？
【发布时间】：2011-12-06 05:25:23
【问题描述】：

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

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

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

问题在于，如果验证失败（例如未设置必填字段），则仍会调用地理编码。而且，如果我再次点击提交按钮，即使没有设置必填字段，表单也会被发布。

只有在不显眼的验证成功后，如何才能调用地理编码服务？

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-3 validation unobtrusive-validation

【解决方案1】：

我实现了类似的东西（感谢 cousellorben），就我而言，我想禁用和更改提交按钮的文本，但只有成功。这是我的例子：

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

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

【讨论】：

【解决方案2】：

您需要捕获较早的事件，并控制如何进行，而不是附加到 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 事件来提交表单。

【讨论】：

遗憾的是它需要 2 个按钮，但它似乎是要走的路。谢谢。
至少会显示一个按钮。如果这有帮助，请标记为已回答。谢谢。
请您更新以反映 live 从 jQuery 1.7 开始已被贬值并改用 on 吗？谢谢:)

【解决方案3】：

这个answer 可能会对您有所帮助，它提供了一个快速示例，说明在表单无效时如何调用函数，基于 MVC 使用的 JQuery Validate 的使用。

【讨论】：