使用 jquery 将 JSON POST 到控制器并使用内置验证答案

【问题标题】：POST JSON to controller with jquery and also use built in validation使用 jquery 将 JSON POST 到控制器并使用内置验证
【发布时间】：2012-05-01 04:54:37
【问题描述】：

我有一个收集一些数据的表格，最重要的是一个需要地理编码以获得纬度和经度的地址。

假设用户输入如下内容：

123 main st
SomEwheRE, NY 12345

我的客户端 javasript 使用 Google 地理编码服务并尝试获取该地址的经纬度。作为回报，我还会获得更多附加信息，包括格式正确的地址：

123 Main St
Somewhere, NY 12345

我想要做的是替换各自文本框中的值，以便用户可以验证数据是否正确，然后最终通过jQuery.post("My/Controller/", myJSONData, function(){}); 提交，但我遇到了一些奇怪的行为。

如果我输入地址但未包含邮政编码（在数据库中是必需的，但不需要对地址进行地理编码），我会收到验证错误。问题是我想推迟验证，直到我从地理编码服务获取信息并替换文本框中的值。

现在，如果我只输入部分地址（然后点击“提交”），会发生以下情况：

缺少必填字段时出现验证错误，我的所有文本框都变为空白
再次点击提交，这一次文本框已正确填写地理编码信息，但所有字段都会产生验证错误。
第三次点击提交，现在验证错误消失，一切正常。此时，我想认为表单有效并允许POST 到Controller。

代码：

    $(document).ready(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        var geoCodedAddress = geoCodeAddress($("#Address1").val(), $("#City").val(), $("#State").val());
        console.log(geoCodedAddress);
        geoCodedAddress.Name = $("#Name").val();
        geoCodedAddress.Phone = $("#Phone").val();
        $("#Address1").val(geoCodedAddress.Address1);
        $("#City").val(geoCodedAddress.City);
        $("#State").val(geoCodedAddress.State);
        $("#ZipCode").val(geoCodedAddress.ZipCode);
    });
});

geoCodeAddress() 返回填写了必填字段的 JSON 对象，并且有效。我相信问题出在我的无能和我发布的代码块之间。

【问题讨论】：

标签： javascript asp.net-mvc json validation jquery-validate

【解决方案1】：

嗯，经过多次修补，这就是我想出的。基本上，当有人点击提交（或输入）时，我会停止提交表单（e.preventDefault()）并检查它是否有效。如果表单数据有效，然后我处理用户输入的内容，用获取的数据填写表单字段（这没有任何功能，它只是在表单中闪烁新数据）。我不知道如何提交表单，所以我使用$.post() 自己发布了它。如果有更好的方法，请发表评论或回答，我会投票。这是我的完整代码：

    $(document).ready(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        if ($("form").valid()) {
            geoCodeAddress($("#Address1").val(), $("#City").val(), $("#State").val(), function (geoCodedAddress) {
                geoCodedAddress.Name = $("#Name").val();
                $("#Address1").val(geoCodedAddress.Address1);
                $("#City").val(geoCodedAddress.City);
                $("#State").val(geoCodedAddress.State);
                $("#ZipCode").val(geoCodedAddress.ZipCode);
                $("#Longitude").val(geoCodedAddress.Longitude);
                $("#Latitude").val(geoCodedAddress.Latitude);
                $.post("/Controller/Action/", geoCodedAddress, function () { $(window).attr("location", "/Controller/"); });
            });
        }
    });
});

【讨论】：