0

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

假设用户输入如下内容：

123 main st
SomEwheRE, NY 12345

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

123 Main St
Somewhere, NY 12345

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

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

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

  1. 缺少必填字段时出现验证错误，并且我的所有文本框都变为空白
  2. 再次点击提交，这次文本框已正确填写地理编码信息，但所有字段都会产生验证错误。
  3. 第三次点击提交，现在验证错误消失了，一切都如预期的那样。此时，我想认为表单有效并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 对象。我相信问题出在我的无能和我发布的代码块之间。

4

1 回答 1

0

好吧，经过多次修补，这就是我想出的。基本上，当有人点击提交（或输入）时，我会停止提交表单（by 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/"); });
            });
        }
    });
});
于 2012-04-20T07:03:02.713 回答