Validation jquery validate is not deleted when I close the modal bootstrap

Asked

Viewed 1,353 times

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">&times;</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 answer

3

You can do it this way:

first Solution

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

Answer found in SO-EN

Second Solution

$('#clearform').on('click', function () {
    var form = $("#register_form");
    form.validate().resetForm();      // clear out the validation errors
    form[0].reset();                  // clear out the form data
});

ANOTHER ANSWER FOUND IN SO-EN

  • +1 - there is also the .hideErrors() but that’s the one I use too.

  • Look at EDIT2 with my continuing doubt. Thank you!

  • Lucas, put your JS, HTML code in jsfiddle.net to see the problem persisting and we can test solutions tbm

  • 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/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.