I have a modal with my inputs, I'm using jQuery.Validate to validate my form on submit, my problem is that when I close the modal and then I open the modal again the messages from validation still there, so my question is, how can I reset or hide those messages when I close the modal?

I tried with this but doesn't work

$('#myModal').on('hidden.bs.modal', function () {
    window.alertas.reset();
 });

How can I solve this?

Here is a sample code to play with.

I have a modal with my inputs, I'm using jQuery.Validate to validate my form on submit, my problem is that when I close the modal and then I open the modal again the messages from validation still there, so my question is, how can I reset or hide those messages when I close the modal?

I tried with this but doesn't work

$('#myModal').on('hidden.bs.modal', function () {
    window.alertas.reset();
 });

How can I solve this?

Here is a sample code to play with.

• javascript
• jquery
• twitter-bootstrap
• validation

4 Answers 4

You can use together jQuery and jQuery Validate's resetForm():

$('#myModal').on('hidden.bs.modal', function() {
    var $alertas = $('#alertas');
    $alertas.validate().resetForm();
    $alertas.find('.error').removeClass('error');
});

Instead of using reset(), try using jQuery Validate's resetForm():

$('#myModal').on('hidden.bs.modal', function () {
    $("#alertas").validate().resetForm();
});

var validator = $("#myModal").validate();
$('#myModal').on('shown.bs.modal', function (){
   validator.resetForm();
});

If you able to find the div which have validation messages then you can try this as well, where uploadModal is Modal popup id and uploadErrorMessages is validation message div id.

   $('#uploadModal').on('hidden.bs.modal', function () 
    {
     $("#uploadErrorMessages").css("display", "none");

    });