在提交之前檢查jQuery驗證的表單提交

我使用Ajax和jQuery來驗證並提交表單中的信息。我遇到的問題是，當我單擊提交按鈕時，表單會在執行驗證檢查並顯示錯誤之前立即向服務器提交信息？在提交之前檢查jQuery驗證的表單提交

我不確定這裏的問題是什麼，所以任何輸入都會很棒！

乾杯

$('#submit_second').click(function() { 
    //remove classes 
    $('#second_step input').removeClass('error').removeClass('valid'); 

    var emailPattern = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
    var phonePattern = /^\+?[0-9]{0,15}$/ ; 
    var fields = $('#second_step input[type=text]'); 
    var error = 0; 
    fields.each(function() { 
     var value = $(this).val(); 
     if(value.length<1 || value==field_values[$(this).attr('id')] || ($(this).attr('id')=='email' && !emailPattern.test(value))) { 
      $(this).addClass('error'); 
      $(this).effect("shake", { times:3 }, 50); 

      error++; 
     } else { 
      $(this).addClass('valid'); 
     } 
     if(value.length<1 || value==field_values[$(this).attr('id')] || ($(this).attr('id')=='phone' && !phonePattern.test(value)) ) { 
      $(this).addClass('error'); 
      $(this).effect("shake", { times:3 }, 50); 

      error++; 
     } else { 
      $(this).addClass('valid'); 
     } 

    }); 

    if(!error) { 
     //update progress bar 
     $('#progress_text').html('66% Complete'); 
     $('#progress').css('width','226px'); 

     //slide steps 
     $('#second_step').slideUp(); 
     $('#fourth_step').slideDown();  
    } else return false; 
}); 

$('#submit_second').click(function(){ 

    url =$("input#url").val(); 
    yourname =$("input#yourname").val(); 
    email =$("input#email").val(); 
    phone =$("input#phone").val(); 

    //send information to server 
    var dataString = 'url='+ url + '&yourname=' + yourname + '&email=' + email + '&phone=' + phone; 

    alert (dataString); 

    $.ajax({ 
     type: "POST", 
     url: "#", 
     data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone, 
     cache: false, 
     success: function(data) { 
      console.log("form submitted"); 
      alert("success"); 
     } 
    }); 
    return false; 
});

來源

2012-07-09 DannyW86

$('form_to_validate').submit(function() { 
    // .. stuff 
});

來源

2012-07-09 14:02:13

我想這一點，但表單有多個部分在每個部分提交後使用jquery加載dynamicaly，因此它在那裏正常工作是2個部分，每個都有一個提交按鈕，第一部分工作正常，但作爲即時通訊嘗試驗證並提交數據到服務器在同一時間在第二階段似乎提交數據之前，它執行驗證檢查的方式我有我的代碼結構？ – DannyW86 2012-07-09 14:34:41

向我們顯示您的問題中的HTML。 – 2012-07-10 07:34:06

我猜你要尋找的是這樣的：

$('#submit_second').submit(function(evt){ 
    evt.preventDefault(); 
    ... 
});

退房jQuery的文檔：http://api.jquery.com/event.preventDefault/

來源

2012-07-09 14:06:03 admenva

不認爲這會工作？我不想阻止表單提交，只是在首次檢查驗證後才發生！如果我將所有的代碼移到一個函數中，你認爲這有助於解決問題嗎？ – DannyW86 2012-07-09 14:45:14

是的。如果驗證失敗，您可以調用preventDefault，否則表單將正確提交。 – admenva 2012-07-09 18:42:11

我在最後的歡呼聲中解決了問題！ http://stackoverflow.com/questions/11413111/problems-with-jquery-form-validation-and-ajax-submit/11413385#11413385 – DannyW86 2012-07-10 13:48:49

在提交之前檢查jQuery驗證的表單提交

回答

相關問題