2

tengo una consulta y es la siguiente:

Tengo un formulario dentro de un modal que es validado con JQuery Validate pero al momento de cerrar el modal y volver abrir el modal se queda con los estilos de validación puestos, y lo que deseo es que al abrir el modal aparezca mi formulario limpio.

Formulario

<div class="modal fade" id="modalNuevo" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <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">Basic Modal</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="#" id="formPersona">
                    <input type="hidden" name="idPersona" id="idPersona" enctype="multipart/form-data"/>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="nombre">Nombre:</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="nombre" name="nombre">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="apellidos">Apellidos:</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="apellidos" name="apellidos">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="edad">Edad:</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="edad" name="edad">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="telefono">Telefono:</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="telefono" name="telefono">
                        </div>
                    </div>
                </form>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btnGuardar">Guardar</button>
                <button type="button" class="btn btn-primary" id="btnActualizar">Actualizar</button>
                <button type="button" class="btn btn-default" id="btnCerrar">Cerrar</button>

            </div>
        </div>
    </div>
</div>

Archivo js

$("#btnNuevo").click(function () {
                //Abre Modal de Registro
                $("#modalNuevo").modal("show");

                //Ocultar Boton Actualizar
                $("#btnActualizar").hide();

                //Mostrar Boton Guardar
                $("#btnGuardar").show();

                //Limpiar Cajas
                $("#idPersona").val("");
                $("#nombre").val("");
                $("#apellidos").val("");
                $("#edad").val("");
                $("#telefono").val("");

                //Habilitar Cajas
                $("#nombre").prop("readonly", false);
                $("#apellidos").prop("readonly", false);
                $("#edad").prop("readonly", false);
                $("#telefono").prop("readonly", false);

            });

Validación

validar: function () {

            var form1 = $("#formPersona");
            form1.validate({
                rules: {
                    nombre: "required",
                    apellidos: "required",
                    edad: {
                        required: true,
                        number: true
                    },
                    telefono: "required"
                },
                messages: {
                    nombre: "Por favor, ingrese su nombre",
                    apellidos: "Por favor, ingrese su nombre",
                    edad: {
                        required: "Por favor, ingrese su edad",
                        number: "Ingrese un número válido"
                    },
                    telefono: "Por favor, ingrese su telefono"
                },
                errorElement: "em",
                errorPlacement: function (error, element) {
                    // Add the `help-block` class to the error element
                    error.addClass("help-block");

                    // Add `has-feedback` class to the parent div.form-group
                    // in order to add icons to inputs
                    element.parents(".col-sm-5").addClass("has-feedback");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.parent("label"));
                    } else {
                        error.insertAfter(element);
                    }

                    // Add the span element, if doesn't exists, and apply the icon classes to it.
                    if (!element.next("span")[0]) {
                        $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
                    }
                },
                success: function (label, element) {
                    // Add the span element, if doesn't exists, and apply the icon classes to it.
                    if (!$(element).next("span")[0]) {
                        $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter($(element));
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
                    $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
                    $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
                }
            }).form();

            if (form1.valid()) {
                persona.registrar();
            }
        },
3
  • Yo intentaria lo siguiente: comentaria o sacarias las lineas $("#btnActualizar").hide(); y $("#btnGuardar").show(); a modo de pruebas y ves que pasa. Y mueve $("#modalNuevo").modal("show") al final del código para ver si se ejectuta.
    – toto
    Commented el 7 ago. 2020 a las 13:00
  • Tambien puedes intentar limpiar el documento registrando este evento que se ejecuta cuando se instancia el plugin y antes que sea visible y ahi metes el codigo de limpieza del formulario. $('#modalNuevo').on('show.bs.modal', function (e) { // do something... })
    – toto
    Commented el 7 ago. 2020 a las 13:08
  • con los modales no hay problemas, son los estilos css de validación que se quedan puestos al abrir el modal.
    – Dum
    Commented el 7 ago. 2020 a las 16:47

1 respuesta 1

1

Puedes crear una función como esta

function clearValidationErrors() {

    var validator = $("#formPersona").validate();
    validator.resetForm();
    $("#divContainer .error").removeClass("error");
}

La cual puedes mandar llamar al principio de tu eventHandler

$("#btnNuevo").click(function () {
    clearValidationErrors();

    //Abre Modal de Registro
    $("#modalNuevo").modal("show");

    //El resto de tu código

Por cierto, cuando utilizas Bootstrap es recomendable tener un container. En mi caso, yo lo suelo incluir antes del form. En tu caso podría quedar así:

<div class="modal-body">
    <div id="divContainer" class="container" style="width: auto;">
        <form class="form-horizontal" action="#" id="formPersona">

Si te fijas, el nombre de mi div del container es que el mismo que estoy llamando en mi función clearValidationErrors. Lo que está haciendo esa línea es buscar la clase error en todos sus descendientes y quitarla.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.