jQuery Ajax 提交表单问题

Question

我使用 jQuery 验证了我的表单，并且应该使用 ajax 提交 问题是。如果任何输入未填写或用户输入了错误的数据，则输入应变为红色，它工作正常，但如果我单击输入以填写或编辑它，它就会丢失。

这是我的代码

$(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

如果这解决了问题，则不确定，但我注意到这一行是错误的：

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

它应该是 required[i]。

Answer 2

您可以看一下 JQuery Ajax Form 插件。为您处理大部分事情。
将“普通”形式转换为 Ajax 形式，对数据进行编码并发布。

您所要做的就是创建您想要在表单发布之前和之后运行的函数。

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

Answer 3

单击错误的输入字段时，输入会丢失，因为代码中有一个 onFocus 侦听器，它确实执行此操作：

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