0

I'm using jQuery Validate in a form within a jQuery dialog. When the user closes the dialog I wish to clear all form fields and reset the fields which have error feedback displayed.

It is correctly resetting the fields to blank, but the error feedback is not being cleared properly.

Here's my dialog code. 

// Attach dialog
$("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    close: function(){
        $('#myDialog')[0].reset(); // This works in resetting the actual form values
        $("#myDialog").validate().resetForm(); // Not working :(
    }
});
Jason Wells
  • 887
  • 6
  • 16
  • 33
  • possible duplicate of [How to clear Jquery validation error messages?](http://stackoverflow.com/questions/2086287/how-to-clear-jquery-validation-error-messages) – Travis J Apr 10 '14 at 19:11

2 Answers2

0

Is the form id myDialog?

If so, I would change the structure to be:

<div id="myDialog>
   <form id="myForm">
   //inputs, etc...
   </form>
</div>

So then your dialog call would look like:

$("#myDialog").dialog({
    autoOpen: false,
    modal: true,
    close: function(){
        //$('#myForm')[0].reset(); // This works in resetting the actual form values
        $("#myForm").validate().resetForm(); // Not working :(
    }
});

I think you are running into collisions with having jQuery UI act on the #myDialog in conjunction with it being the form you are trying to validate.

Another option is to destroy the dialog on close, and always recreate it on open.

Jason
  • 7,612
  • 14
  • 77
  • 127
0

If they are still not clearing, changing close to beforeClose works, so they are cleared before the dialog is closed and moved on the DOM.

Andrew
  • 1