jqueryの - event.preventDefault（）内部関数内

Question

このスクリプト が、私はそれが何をしたいのかしないだろうので、私は、jqueryのいくつかの基本的な考え方を逃しているようです：

$(document).ready(function(){ 

    $('#form').submit(function(event) { 
    console.log("submitted form, checking #domain_url_input "); 
    // event.preventDefault(); 
    var submit_error=false; 
    var is_primary_url = false; 
    var url = $('#domain_url_input').val(); 

    var get_url = '/i.php?a=check&url2check=' + escape(url); 
    var valid_data = $.ajax({ 
     event: event, 
     url: get_url, 
     success: function(response) { 
      // alert('ajax successful'); 
      is_primary_url = $(response).find('#check_div').text(); 
      // alert(is_primary_url); 

      var dns_zone = $('#dns_zone_sel').val(); 

      if (is_primary_url == 'YES' && dns_zone=='') 
       { 
       event.preventDefault(); 
       alert('Choosing a DNS ZONE is required!'); 
       $('#dns_zone_sel').focus(); 
       this.submit_error=true; 
       // if (submit_error==true) event.preventDefault(); 
       // return 'error'; 
       } // 

      } // end func success 
     }); // ajax 

    }); // submit 

    }); // rdy 

（Iが減少しましたコードコースのビット）

コードを除いて、完全に機能します。

event.preventDefault（）;

は有効になりません。私は右

$（ '＃フォーム'）。提出（関数（イベント）{...後に、第2のラインにそれを置く場合

は

それはしかし動作します。

AJAX呼び出しの作品、私はポジティブな結果を得る ことが可能ではないでしょうかのように、それ以上を提出しないようにすることである

警告の後：？

event.preventDefault（）; alert（ 'DNS ZONEを選択する必要があります！'）;

は、preventDefault（） が効果を持たないことを除いて、完全に機能します。 私は適切なアクセス権を持っていないイベント「イベント」が原因である可能性がありますか？

目的は次のとおりです。

送信イベントを停止します。 古いjsスクリプト "return false;"でこれを行いました。 でも動作しません。 Btw：preventDefault（）と "return false"の違いを知っています...私は試した情報を追加しています。この場合、 "return false"は$（...）。ajax（）から$（...）。submit（）イベントに戻ります。

ポイントは次のとおりです。$（）。ajaxパーツが依然としてリクエストを行っているときに、submit（）というフォームがすでに進行中です。だから何とか私は、Ajaxが終了するまでsubmit（）を待たせる必要がありますか？

任意のアイデア用のThanx！

AFTER ALL THIS 私が望んだかexcactly WORKS SOLUTION次 - 私の友人アンドレアス、@Coryと@Michaelのおかげ：ALL TO

`<script type="text/javascript"> 
$(document).ready(function(){ 
var disableSubmit = false; 
var transmitNow  = false; 
$('#form').submit(function(event) { 
    console.log("submitted form, checking #domain_url_input "); 
    console.log("disableSubmit=" + disableSubmit); 
    if(transmitNow === true) return; 
    event.preventDefault(); 
    if (disableSubmit ===true) return; 
    $('#form').prop('disabled', true); 
    var submit_error=false; 
    var is_primary_url = false; 
    var url = $('#domain_url_input').val(); 
    if (url=='') { alert('Error! A domain/url must be provided!'); return false; } 

    var get_url = '/i.php?a=check&ajax=1&url2check=' 
         + escape(url) + '&t='+ Date.now(); 

    disableSubmit = true; // Formular ausgrauen .... als todo 
    var valid_data = $.ajax({ 
     url: get_url, 
     error: function(){ disableSubmit = false; $('#form').prop('disabled', false); }, 
     complete: function(){ disableSubmit = false; $('#form').prop('disabled', false); }, 
     success: function(response) { 
      disableSubmit = false; 
      $('#form').prop('disabled', false); 

      is_primary_url = $(response).find('#is_url_primary_check_div').text(); 

      var registrar = $('hd[registrar]').val(); 
      var webserver = $('hd[webserver]').val(); 
      var dns_zone = $('#dns_zone_sel').val(); 

      if (is_primary_url == 'YES' && dns_zone=='') 
       { 
       // event.preventDefault(); 
       alert('You entered a primary domain. Choosing a DNS ZONE is required!'); 
       $('#dns_zone_sel').focus(); 
       submit_error=true; 
       } 
      if (submit_error != true) 
       { 
       transmitNow = true; 
       $('#form').submit(); 
       } 
      } // end event func success 
     }); // ajax 

    }); // submit 

}); // rdy 
    </script>` 

ありがとう!! :) 幸福！

Answer 1

Cᴏʀʏが説明したように、$.ajax()コールが完了した時点でフォームがすでに送信されているため、.preventDefault()コールは機能していません。この問題を解決するために

一つの方法は、submit()コールバックで直接常にコール.preventDefault()になり、その後、あなたの検証が成功した後、明示的にフォームを送信するために引数なしでsubmit()を呼び出します。

さらに、フォームの入力フィールドを無効にし、Ajaxリクエストを待つ間に送信ボタンを使用したいとします。これにより、submit()コールを明示的に実行している間にsubmit()コールバックが何らかのアクションを起こすのを避けることもできます。あなたは、サーバーからerror応答を取得した場合にどのようなたとえば、または決して全く応答を得る -

var disableSubmit = false; 
$('#form').submit(function(event) { 
    event.preventDefault(); 
    if(disableSubmit) return; 
    disableSubmit = true; 
    $('#form input, #form button').prop('disabled', true); 
    $.ajax({ 
     ... 
     success: function(data) { 
      if(dataIsGood(data)) { 
       $('#form').submit(); 
       disableSubmit = false; 
       $('#form input, #form button').prop('disabled', false); 
      } 
     } 
    }); 
}); 

ここで処理されないいくつかのエラーとエッジケースがあります。

アイデアを説明するための簡易版？しかし、これは始める場所かもしれません。

Answer 2

組み込みフォームメカニズムをajaxリクエストと組み合わせて使用​​することは問題です。 ajaxを使用してフォームを送信する場合は、フォームが送信されるときにpreventDefault()のままにしてからフォームの検証を行い、渡された場合は$('#form').submit()を手動で実行します。

submitボタンをフォームから削除し、通常のボタンに置​​き換えて$('#form_submit_button').click()に「送信」を取り込み、検証が成功した場合は手動でフォームを送信できます。

後者のアプローチの基本例：

HTML：

<form id="form" onSubmit="validate_Form();return false"> 
    //form fields...no submit-type button 
    <button id="form_submit_button"> 
</form> 

JS：

$("#form_submit_button").click(function() { 
    if(validate_form()) { //put your ajax code in the validate_form() method 
     $("#form").submit(); 
    } 
}); 

編集：

@Michael_Gearyが指摘したように、後者のアプローチではありませんユーザーがEnterボタンを押してフォームを送信することができますので、そのオプティを使用したい場合はEnter pressをキャプチャしてフォームを送信しないようにしなければならないでしょう...この質問で受け入れられた答え：Capture the enter key cross-browser, my solution isn't workingを使うことができますが、それはページ全体に影響し、ちょっと複雑です。だから最初のアプローチが最適です。