如何ajax驗證幾個表單字段，然後提交自然的方式？/

我在一個情況下，我有一些形式與一些領域。如何ajax驗證幾個表單字段，然後提交自然的方式？/

我有5個輸入字段，並且我想驗證2個字段其的用戶名和使用jquery AJAX 購買代碼。如果這兩個字段是有效的，像borwser那樣自然地提交表單（不是ajax）。

這裏是我的這個

$(document).ready(function() { 

    $('#submit').click({status:'initial'}, function(e) { 

    e.preventDefault(); 

    $('.error').hide(); 
    $('.success').hide(); 

    // get data from form 
    var username = $("input#username").val(); 
    var itemCode = $("input#itemCode").val(); 
    var dataString = 'username ='+ username + '&itemCode=' + itemCode; 

    $.ajax({ 
     type: "POST", 
     url: "verify_purchase.php", 
     data: dataString, 
     success: function(html) { 

     // valid purchase 
     if (html == 'valid') { 
      form.submit(); 
     } else{ 
      // if wrong purchase details 
      // do some stuff 
     };     
     } 
    }); 

});

jQuery的問題是，當我提交表單，Ajax的工作原理完美，但我的形式是不一樣的方式瀏覽器後，提交提交表單。

任何幫助？

來源

2013-05-25 Mohd Sakib

$（ '＃形式'）的觸發器（ '提交'）。這是行不通 –

您是否通過console.log（html）檢查jsno返回的數據？它真的=='有效'嗎？ – akhilless

是返回的數據是「有效的」。我也測試瞭如果（html =='有效'）{alert（'yes'）} 其工作 –

在你有代碼，我認爲錯誤是這一行：

form.submit();

我看不到任何地方form定義。您所提供的代碼純粹去，你可以這樣做，而不是：

$('#submit').parents('form').submit()

不過，我認爲更好的整體辦法是一個submit事件處理程序添加到窗體，並停止「自然」投稿如果驗證失敗，而不是處理提交按鈕的click事件。根據表單和瀏覽器的不同，可能會有人在文本字段中提交返回結果，因此提交按鈕的點擊事件不一定可靠。

所以，如果你有這樣的形式：

<form id="my_form" action="purchase.php" method="post">

然後腳本可能是這樣的：

$('#my_form').submit(function (e) { 
    $('.error').hide(); 
    $('.success').hide(); 

    // get data from form 
    var username = $(this).find("input#username").val(); 
    var itemCode = $(this).find("input#itemCode").val(); 
    var dataString = 'username ='+ username + '&itemCode=' + itemCode; 

    $.ajax({ 
     type: "POST", 
     async: false, 
     url: "verify_purchase.php", 
     data: dataString, 
     success: function(html) { 

     // valid purchase 
     if (html == 'valid') { 
      return true; 
     } else{ 
      // if wrong purchase details 
      e.preventDefault(); 

      // do some stuff 
      return false; 
     };     
    } 
});

來源

2013-05-25 12:11:33

這也是我不錯的做法 –

async false is deprecated –

抱歉關閉的話題，但我只是檢查了你的網站：http://www.browsersupport.net/書籤它，有用的網站thx :) –

相反的：

form.submit();

試試這個：

//use $('#submit') not $(this) {ajax context} 
$('#submit').off('click').click(); //this should reaffect native click behaviour on submit

來源

2013-05-25 11:55:13

這裏工作正是我想要的！ –

一般以提交表單因爲jQuery爲了需要選擇找到元素，你應該提供其ID將jQuery在DOM上調用一個函數。例如，你有一個表單看起來就像是：

<form id="orderForm" action="orderhandler.php" ...> 
some fields... 
</form>

這裏爲了通過jQuery提交表單寫

$('form#orderForm').submit();

或

$('form#orderForm').trigger('submit');

來源

2013-05-25 11:55:24 akhilless

這也不起作用:( –

相反，如果用戶檢查點擊了提交按鈕，只需使用javascript阻止自然提交如果驗證返回錯誤。

所以這樣的：

<form action="/somewhere.php" action="post" 
    onsubmit="return startValidatingForm();">

JavaScript函數看起來是這樣的：現在

function startValidatingForm(){ 
    // Do ajax and validation 

    return html == "valid"; 
}

，如果Ajax請求發現任何錯誤，該函數返回false這將防止從形式實際提交。如果函數返回true，則表單將被提交自然方式。

來源

2013-05-25 12:10:33 Opifexer

如何ajax驗證幾個表單字段，然後提交自然的方式？/

回答

相關問題