Como fazer para que as mensagens de validação do jQuery Validate se apagarem quando fecho a modal Bootstrap?
Tenho os seguintes códigos que são executados quando fecho a modal clicando no botão Fechar
e quando clico na máscara. Quando abro novamente a modal Bootstrap as validações continuam lá.
/**
* Fechar Modal de Inclusão de Contrato após clique na área fora da modal
*/
$("#mascara").click(function() {
$(this).hide();
$(".window").hide();
$('#myModal').on('hidden.bs.modal', function () {
limparCampos();
});
});
/**
* Fechar Modal de Inclusão de Contrato através do Botão Fechar
*/
$('.fechar').click(function(ev) {
ev.preventDefault();
$("#mascara").hide();
$(".window").hide();
$('#myModal').on('hidden.bs.modal', function () {
limparCampos();
});
});
EDIT1
Amigos, as opções apresentadas não funcionaram comigo. Continua apresentando as mensagens de erro. Segue trecho do código:
jQuery(document).ready(function() {
var validator = $('#ajax_form_inclusao').validate({
rules : {
numeroContrato : {
required : true...
O código acima faz a validação. O código abaixo é responsável por fechar a modal.
/**
* Fechar Modal de Inclusão de Contrato após clique na área fora da modal
*/
$("#mascara").click(function() {
validator.resetForm();
$(this).hide();
$(".window").hide();
});
/**
* Fechar Modal de Inclusão de Contrato através do Botão Fechar
*/
$('.fechar').click(function(ev) {
ev.preventDefault();
validator.resetForm();
$("#mascara").hide();
$(".window").hide();
});
EDIT 2:
Estou trabalhando com uma modal bootstrap, conforme o código abaixo. Como faço para apagar os campos e a validação do jquery validate na modal?
<!--MODAL DE INCLUIR-->
<div class="modal hide fade in" id="myModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form method="post" action="" id="ajax_form_inclusao">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Incluir Contrato</h4>
</div>
<div class="modal-body">
<table style="padding: 11px;">
<tr>
<td><input type="hidden" name="acao"
value="incluirContrato" /> Nº Contrato: <input type="text"
id="numeroContrato" name="numeroContrato" class="input-medium"
placeholder="Numero do Contrato" maxlength="10">
</td>
</tr>
<tr>
<td>Data Inicial: <input type="text" name="dataInicial"
value="" placeholder="Data Inicial" style="width: 150px">
<script type="text/javascript">
$(function() {
$('*[name=dataInicial]')
.appendDtpicker(
{
"closeOnSelected" : true,
"calendarMouseScroll" : false,
"minuteInterval" : 15,
"autodateOnStart" : false
});
});
</script>
</td>
</tr>
<tr>
<td>Data Final: <input type="text" name="dataFinal"
value="" placeholder="Data Final" style="width: 150px">
<script type="text/javascript">
$(function() {
$('*[name=dataFinal]')
.appendDtpicker(
{
"closeOnSelected" : true,
"calendarMouseScroll" : false,
"minuteInterval" : 15,
"autodateOnStart" : false
});
});
</script></td>
</tr>
<tr>
<td>Valor do PF: <input type="text"
class="input input-medium" name="valorPF"
placeholder="Valor do PF" maxlength="10"></td>
</tr>
<tr>
<td>Qtd de PF Contratato: <input type="text"
class="input input-medium" name="qtdPFContratado"
placeholder="Quantidade de PF" maxlength="20"></td>
</tr>
<tr>
<td>Status: <select name="status" class="status" id="status">
<option value="">-- Selecione --</option>
<option value="A">Ativo</option>
<option value="I">Inativo</option>
</select></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" class="btn">Limpar</button>
<button type="button" name="fechar" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary" value="Salvar">Salvar</button>
</div>
</div>
</div>