CODEWITHSUNDEEP
javascriptjqueryajaxvalidationtwitter-bootstrap
Maff
Maff

Reputation: 1032

Reset/remove classes from a form after jquery validator use inside modal

I am basically loading content into a bootstrap modal, editing the information and validation it using jquery validator, then submitting it with an ajax request. Everything is working well so far, until I click on another item where the validation classes are still appearing. My question is, is there a way of removing the validator classes after closing the bootstrap modal? Please help

Upvotes: 4

Views: 10276

Answers (4)

XWiśniowiecki
XWiśniowiecki

Reputation: 1843

For those using Bootstrap 3 (resetForm() not working there):

$('.form-group').each(function () { $(this).removeClass('has-success'); });
$('.form-group').each(function () { $(this).removeClass('has-error'); });
$('.form-group').each(function () { $(this).removeClass('has-feedback'); });
$('.help-block').each(function () { $(this).remove(); });
$('.form-control-feedback').each(function () { $(this).remove(); });

If you set it like below:

highlight: function (element) {
    $(element).closest('.form-group').removeClass('has-success');
    $(element).closest('.form-group').addClass('has-error has-feedback');
    $(element).closest('.form-group').find('span.form-control-feedback').remove();
    //$(element).closest('.input-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
    $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
},

unhighlight: function (element) {
    $(element).closest('.form-group').removeClass('has-error');
    $(element).closest('.form-group').addClass('has-success has-feedback');
    $(element).closest('.form-group').find('span.form-control-feedback').remove();
    //$(element).closest('.input-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
    $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok    form-control-feedback" aria-hidden="true"></span>');
},

errorElement: 'span',
errorClass: 'help-block',

errorPlacement: function (error, element) {
    if (element.parent('.input-group').length) {
        error.insertAfter(element.parent());
    } else {
        error.insertAfter(element);
    }
}

Upvotes: 3

Senthil Kumaran
Senthil Kumaran

Reputation: 116

If you are using bootstrapvalidator, the following code will help to get rid of error elements

$("#editModal").on('hidden.bs.modal', function () {

        //Removing the error elements from the from-group
        $('.form-group').removeClass('has-error has-feedback');
        $('.form-group').find('small.help-block').hide();
        $('.form-group').find('i.form-control-feedback').hide();

    });

Upvotes: 4

Petra
Petra

Reputation: 575

You can use the hide (or hidden) function:

$('#myModal').on('hidden', function () {
// do something… removeClass etc.
})

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

There is a resetForm method you can use to set the state of the validator.

// on load of your dialog:
var validator = $('#myForm').validate();
validator.resetForm();

Upvotes: 5

Related Questions