jQuery Ajax提交表單問題

Question

我有我的表單驗證使用jQuery，應該使用ajax submited問題是。如果任何輸入未填寫或用戶輸入了錯誤的數據，則輸入應爲紅色，但它工作正常，但如果我單擊輸入以填充或編輯它會丟失。

這裏是我的代碼

$(document).ready(function(){ 
    // Place ID's of all required fields here. 

    required=["name", "adres","huisnr","postcod", "phone","email"]; 

    name=$("#name"); 
    huisnr=$("#huisnr"); 
    email=$("#email"); 
    phone=$("#phone"); 
    postcod=$("#postcod"); 
    errornotice=$("#error"); 

    // The text to show up within a field when it is incorrect 
    emptyerror="wrong"; 
    emailerror = "Invalid e-mail."; 
    postcoderror="Invalid postcode."; 
    phonerror = "Invalid phone number."; 

    $(".submit").click(function(){ 
     //Validate required fields 
     for(i=0;i<required.length;i++){ 
     var input=$('#'+required); 

     if(input.val() == "" || input.val() == emptyerror){ 
      input.addClass("textfield error"); 
      input.val(emptyerror); 
      errornotice.fadeIn(750); 
     }else{ 
      input.removeClass("textfield error"); 
     } 
     } 

    //Validate the Postcode.first letter should not be 0, space then the two alphabit big letters from A-Z 
      if(! postcod.val().match(/^([1-9]\d{3}\s[A-Z]{2})$/)){ 
      postcod.addClass("textfield error"); 
      postcod.val(postcoderror); 
     } 
    //Validate the phone  
      if(!phone.val().match(/^[0-9]{3}-|\s[0-9]{3}-|\s[0-9]{5}$/)) { 
      phone.addClass("textfield error"); 
      phone.val(phonerror); 
     }  

    // Validate the e-mail. 
      if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) { 
     email.addClass("textfield error"); 
     email.val(emailerror); 
     } 

    //if any inputs on the page have the class 'textfield error' the form will not submit 
      if($(":input").hasClass("textfield error")){ 
      return false; 
     }else{ 
       errornotice.hide(); 
      return true; 
     } 

     var dataString= 'name=' + name + '&huisnr=' + huisnr + '&email=' + email + '&phone=' + phone + '&postcod=' + postcod ; 
     alert (dataString); 


$.ajax({ 
    type: "POST", 
    url: "mail.php", 
    data: dataString, 
    success: function() { 
    $('#contact_form').html("<div id='message'></div>"); 
    $('#message').html("<h2>Contact Form Submitted!</h2>") 
    .append("<p>We have received your order.</p>") 
    .hide() 
    .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
    }); 
    } 
}); 
//cancel the submit button default behaviours 
    return false;  


}); 

    // Clears any fields in the form when the user clicks on them 
     $(":input").focus(function(){ 
     if($(this).hasClass("textfield error")){ 
      $(this).val(""); 
      $(this).removeClass("textfield error"); 
     } 
     }); 
}); 

HTML Form: 
<form id="theform" action="mail.php" method="post"> 
          <fieldset> 
           <legend></legend> 
           <table cellpadding="0" cellspacing="0" border="0" style="margin-top:7px;"> 
            <tr> 
             <td><label for="">Name *</label></td> 
             <td><input type="text" name="name" id="name" value="" class="textfield" tabindex="1" /></td> 
            </tr> 
            <tr> 
             <td><label for="">Adres *</label></td> 
             <td><input type="text" name="adres" id="adres" value="" class="textfield" style="width:160px; margin-right:10px;" tabindex="2" /> Huisnr. * <input type="text" name="huisnr" id="huisnr" value="" class="textfield" style="width:74px;" tabindex="3" /></td> 
            </tr> 
            <tr> 
             <td><label for="">Postcode *</label></td> 
             <td><input type="text" name="postcod" id="postcod" value="" class="textfield" maxlength="7" style="width:70px; margin-right:10px;" tabindex="4" /> 
            </tr> 
            <tr> 
             <td><label for="">Telefoonnummer *</label></td> 
             <td><input type="text" name="phone" id="phone" value="" class="textfield" tabindex="6" /></td> 
            </tr> 
            <tr> 
             <td><label for="">E-mailadres *</label></td> 
             <td><input type="text" name="email" id="email" value="" class="textfield" tabindex="6" /></td> 
             </tr> 
             <tr> 
             <td colspan="2" id="error">There were errors on the form, please make sure all fields are filled out correctly.</td> 
            </tr> 
           </table> 
          </fieldset> 
         </form> 
<div class="checkOut"><a href="" class="submit"><span>Submit Form</span></a><div class="spacer"></div></div> 
       </div> 

Answer 1

錯誤在輸入欄上點擊的時候，因爲你必須在你的代碼的聚焦狀態監聽器正是這麼做的輸入丟失：

$(":input").focus(function(){ 
     if($(this).hasClass("textfield error")){ 
      // here is your problem: 
      $(this).val(""); 
      $(this).removeClass("textfield error"); 
     } 
     }); 

Answer 2

如果這能解決問題不積極，但我注意到這條線是錯誤的：

var input=$('#'+required); 

應該required[i]。

Answer 3

你可以看看JQuery Ajax Form插件。照顧你的大部分東西。 將「普通」轉換爲Ajax表單，對數據進行編碼並將其發佈。

所有你需要做的就是創建你想要在表單帖子前後運行的函數。

http://jquery.malsup.com/form/