2012-07-10 71 views
0

我使用jQuery創建了一個動態表單,該表單包含兩個部分,一旦第一部分正確完成,第二部分將無需刷新頁面。jQuery表單驗證和Ajax提交問題

我的問題是,當第二部分完成時,我需要執行驗證,並明確確保沒有不正確的數據發送到服務器。現在發生的情況是,如果我第二次點擊提交按鈕,提交不正確的數據,驗證是否在初始點擊提交按鈕時起作用,但即使沒有修復表單輸入字段中的數據?

我在網上搜索答案,並嘗試了一些不同的東西:

我試圖改變第二提交方法:

$('infoform').submit(function() { 
// .. stuff 

});

但沒有工作,並也有人建議我嘗試:

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

});

但這也沒有工作,只阻止驗證完全工作?

我想要的是顯然有驗證保持檢查錯誤,直到輸入的數據是正確的,一旦沒有錯誤的數據,然後發送使用ajax調用?

爲形式的代碼是:

<form id="infoform" name="infoform" action="#" method="post"> 

     <div id="first_step"> 

       <!--<h1>WANT A FREE<br />SOCIAL MEDIA<br />AUDIT?</h1>--> 
       <div class="formtext-img"></div> 

       <div class="form"> 

        <label for="username">Facebook or Twitter page address:</label> 
        <input type="text" name="url" id="url" value="http://" />      

       </div><!-- clearfix --><div class="clear"></div><!-- /clearfix --> 

        <input class="submit" type="submit" name="submit_first" id="submit_first" value="" /> 
     </div><!--end of first step--> 


     <div id="second_step"> 


       <div class="form"> 

        <div id="nameInput"> 
        <label for="yourname">Your Full Name. </label> 
        <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
        <input type="text" name="yourname" id="yourname" placeholder="Your name" /> 
        </div> 
        <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
        <div id="emailInput">     
        <label for="email">Your email address.</label> 
        <input type="text" name="email" id="email" placeholder="Email address" /> 
        </div> 
        <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
        <div id="phoneInput"> 
        <label for="phone">Your contact number. </label> 
        <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
        <input type="text" name="phone" id="phone" placeholder="contact number" /> 
        </div> 

       </div>  <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 

        <!--<input class="back" type="button" value="" />--> 

        <input class="send submit" type="submit" name="submit_second" id="submit_second" value="" /> 

     </div><!--end of second step--> 

    </form> 

這裏是我的jQuery的,我曾嘗試合併這兩個「submit_second」功能於一體的,但這種事情停止發生被點擊第二提交按鈕的時候!

$('#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'); 
     } 



}); 
$('#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(dataString); 
      } 
     }); 
    return false; 

}); 

回答

0

好吧,所以經過很多修改代碼並嘗試相同的事情無數次後,我終於得到它的工作正是我想要的!

我已經將Ajax回調函數與驗證檢查一起放回到了一個方法中,並計算出我要出錯的地方......語法錯誤!在Ajax調用提交數據之前,我忘記關閉用於驗證檢查的括號!我的錯!我對此很新,儘管如此我只是很高興終於有了它的工作!

$('#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); 
      console.log("running"); 
      error++; 
     } else { 
      $(this).addClass('valid'); 
     } 
    }); 


    if(error==0) { 
    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: "http://clients.socialnetworkingsolutions.com/infobox/contact/", 
      data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone, 
      cache: false, 
      success: function(data) { 
       console.log("form submitted"); 
       alert(dataString); 
      } 
     }); 
    return false; 

    } 

}); 
0

如果您有一個提交按鈕和一個提交事件,會更合乎邏輯嗎? 然後提交功能將運行驗證,並根據它的結果提交或不提交表格。