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/