views:

47

answers:

1

Hi,

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"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"&gt;&lt;/script&gt;
<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.

A: 

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()...

Ryley
Thank you for your help. I checked out your example and it worked for me too when I did the same.In my original code the form elements were in a table. I (wrongly) thought this would not make a difference and so removed that html to make it more readable.However when the form is in a table the bug occurs. When it is not, all is fine.I have no idea why though.
Jonathan
If you like, edit your post to show the minimal table that causes the error, and we can look at that...
Ryley
Simply putting a <table> tag before the <form> tag, and a </table> tag after the </form> tag was enough to make the bug occur. I can't figure out why, but I have used floating divs and such to replicate the table functionality. So the question is now purely one of general interest :)
Jonathan