Validation jquery validate does not go away when I close the modal bootstrap

Question

Validation jquery validate does not go away when I close the modal bootstrap

Navigation

#1 by (3 votes)

2

How do I validate jQuery validate messages when I close the modal Bootstrap?

I have the following codes that run when I close the modal by clicking the Fechar button and when I click on the mask. When I reopen the modal Bootstrap the 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 displayed did not work for me. It still displays error messages. Here is the 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'm working with a modal bootstrap, as per the code below. How do I delete fields and jquery validate validation 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>

php javascript jquery jquery-validate

asked by anonymous 06.05.2014 / 21:10

1 answer

How to declare single-key fields with EntityFramework? How to make the user not get an Invalid TXT?

score 3 · Answer 1

You can do this as follows:

first solution

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

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

Response 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