Question

I am using the jQuery form validation plugin.

The problem I have is that if the form is invalid and I click submit, each time another error/success message appears on screen for each field. Essentially showing a history of the error/success messages until the form is valid.

Why is this happening and how do I fix it so that only the latest error/success message is shown?

Here is the code in the head:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: false,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    file: "required",
    name: "required",
    owner: "required"
  }
});
  });
  </script>

And here is the form (simplified slightly):

<form id="myform" action="upload" method="post" enctype="multipart/form-data">

Select file to upload: *    
<input type="file" name="file" id="file" title="Please select a file to upload">

Name for file: *
<input type="text" name="name" value="{{ name }}" id="new_file_name" title="Please choose a filename">

Select owner for file: *
<select name="owner" id="owner" title="Please select an owner">
<option value="">[ Choose an owner ]</option>
...options generated by template system...
</select>

File comments:
<textarea rows="5" cols="20" name="comments">{{ comments }}</textarea>

<input type=submit value=Upload>
</form>

EDIT:
The form was inside a table in my original html. This bug only occurs when the form is within a table.

Answer 1

Works OK for me: http://jsfiddle.net/ryleyb/H6rQT/

Can you look at my example, compare to what you’re doing, and see if there’s something different in yours? My first guess would be that you’re calling the validate function on click somewhere, rather than just once in document.ready()…