Cannot clear the form after Submit using the Validation plugin in jQuery

Question

Hello,

I an quite new to jQuery and I have a problem while trying to create a form. I am using the Validation plugin for validate the email (one the form's field). When I click the Submit button I want to call my own function because I want to save the data in an XML file.

This is my button: (as I understood the plugin uses "submit" for understand the button)

<input type="submit" name="submit" class="submit" id="submit_btn" value="Send"/>

and here is the script for the validation:

 <script type="text/javascript">
  $(document).ready(function() {

        //this is my form
 $("#contactForm").validate();

 /*save the valid data in the xml*/
 $(".submit").click(function() { 
 var email = $("input#email").val();
 var subject = $("input#subject").val();
 var message = $("textarea#message").val();

 if (email == "" || !$("#contactForm").valid()) {
   return false;
  }    

 var dataString = 'email='+ email + '&subject=' + subject + '&message=' + message;
 //alert("DATA: " +dataString);  

  $.ajax({
     type: "POST",
     url: "SaveData.jsp",
     data: dataString,  
     success: function(data){}   
  });

  return false;
});
});
</script>

In general it works ok but I have two basic problems. When I click the button in the beginning having all the form empty, I get no message for the field required. Also when the data are valid and I am doing the submit, the form does not become clear after the submit.

If I deleted this script code, these actions are working properly but I can not save the data!

Does anyone know what is wrong?

Thanks a lot!

Answer 1

Hi again,

I found something finally. I changed the line:

$(".submit").click(function() {....}

with this one:

submitHandler: function() { ....}

So now when I click the button I get the right message for the required field. The only thing I haven't found yet is how to clear the form after submitting. I know how to do this manually in an other function, but I saw that the Plugin does this thing also. So I was thinking that probably is better to use the one the Plugin has.

So does anyone know what it wrong?

Thanks

Answer 2

First, store a reference to your validator, like this:

var validator =  $("#contactForm").validate();

In your $.ajax success handler, or elsewhere if you want, you can call this:

validator.resetForm();

You can read the docs for .resetForm() here