Question

i have my form validated using jQuery and should be submited using ajax
the problem is. if any of the input is not filled out or wrong data is enered by the user the input should turn on red it works fine, but if i click on the input inorder to fill it out or edit it gets lost.

here is my code

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

the input gets lost when clicking on an input field with error because you have an onFocus listener in you code that does exactly that:

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