2
How to make jQuery Validate validation messages delete when I close modal Bootstrap?
I have the following codes that are executed when I close the modal by clicking the button Fechar
and when I click on the mask. When I open the modal Bootstrap validations are still there.
/**
* 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
Friends, the options shown did not work with me. Keep showing the error messages. Follow code snippet:
jQuery(Document). ready(Function() {
var validator = $('#ajax_form_inclusao').validate({
rules : {
numeroContrato : {
required : true...
The code above does the validation. The code below is responsible for closing the 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:
I am working with a modal bootstrap, according to the code below. How do I delete the fields and validate jquery in 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>
+1
- there is also the.hideErrors()
but that’s the one I use too.– Sergio
Look at EDIT2 with my continuing doubt. Thank you!
– Lucas Leonardo
Lucas, put your JS, HTML code in jsfiddle.net to see the problem persisting and we can test solutions tbm
– Tafarel Chicotti
I solved the problem using the codes placed here and without using the modal of bootstrap. I used a standard javascript modal as described on the site: http://www.botecodigital.info/jquery/criando-uma-janela-modal-simples-com-jquery/
– Lucas Leonardo