jqueryを使用してコントローラにPOST JSONを実装し、組み込みの検証を使用する

Question

私はいくつかのデータを収集するフォームを持っています。最も重要なのは、LatとLongを取得するためにジオコードする必要があるアドレスです。

は、ユーザ入力を仮定し、何かのように：

123 main st 
SomEwheRE, NY 12345 

私のクライアント側のjavasriptは、Googleのジオコーディングサービスへの外に出ると、そのアドレスのための緯度と長いを取得しようとします。その見返りに、私はまた、適切な形式のアドレスを含むより多くの付加情報を取り戻す：

123 Main St 
Somewhere, NY 12345 

私は、ユーザーがデータが良いです確認し、最終的に経由して提出することができるように、それぞれのテキストボックスに値を置換されてやりたいですjQuery.post("My/Controller/", myJSONData, function(){});しかし、私はいくつかの奇妙な動作を得ています。

住所を入力し、郵便番号を含まない場合（データベースには必要ですが住所をジオコードする必要はありません）、検証エラーが発生します。つまり、ジオコードサービスから情報を取得してテキストボックスの値を置き換えるまで、検証を延期することです。

私は部分的にしかアドレスを入力（および「送信」ヒット）場合は今のところ、これは何が起こるかです：

1. 検証エラーが不足している必須フィールド上で発生し、すべての私のテキストボックスが空白に行く
2. もう一度submitを押すと、テキストボックスにはジオコーディングされた情報が正しく埋め込まれますが、すべてのフィールドで検証エラーが生成されます。
3. 3回目に送信してください。これで検証エラーが消え、すべてが期待どおりです。この時点で、私は有効なフォームを検討し、を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オブジェクトを返します。問題は私の不適格と、私が投稿したコードブロックの間にあると思う。

Answer 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/"); }); 
      }); 
     } 
    }); 
});