none
FormValidator no funciona después de un submit RRS feed

  • Pregunta

  • Buenas.

    Estoy utilizando un plugin Javascript para realizar validaciones de un formulario. El plugin se configura cuando cargó el DOM (jquery ready) y funciona perfecto la primera vez, no permite que un botón submit haga la petición al Server si los campos a evaluar no cumplen con las reglas establecidas. Adicionalmente la página tiene un botón Limpiar que hace una petición ajax al Server únicamente para traer la hora del servidor y limpiar los campos por Javascript pero después de ello la validación sigue funcionando correctamente. El problema ocurre cuando se cumplen las reglas de validación y el botón submit hace la petición, el registro se graba correctamente en la BD, pero sucede que después de pulsar el botón limpiar para agregar un nuevo registro, la validación no funciona, ya que a pesar que los campos están vacíos, el botón submit lanza la petición al servidor siendo incorrecto este comportamiento. Si se vuelve a pulsar nuevamente el botón Limpiar, la validación ya funciona de nuevo correctamente.

    Este es el html del formulario

    <form id="frmRegistroOficio" class="form-horizontal" role="form" action="">
    <hr />
    <div class="form-group row">
    	<label for="txtCodLst" class="col-md-3 col-lg-3 control-label">
    		Nº de LST:</label>
    	<div class="col-md-3 col-lg-3 ">
    		<div class="input-group">
    			<input type="text" name="txtCodLst" id="txtCodLst" maxlength="11" disabled="disabled"
    				class="form-control" />
    			<span class="input-group-addon glyphicon glyphicon-search btn" id="imgBuscarOficio"
    				title="Buscar oficio" style="font-size: 15px;"></span>
    		</div>
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtOficio" class="col-md-3 col-lg-3 control-label">
    		Nº de Oficio:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtOficio" id="txtOficio" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="cboDistrito" class="col-md-3 col-lg-3 control-label">
    		Distrito Judicial:</label>
    	<div class="col-md-3 col-lg-3">
    		<select id="cboDistrito" name="cboDistrito" class="form-control">
    		</select>
    	</div>
    </div>
    <div class="form-group row">
    	<label for="cboDepartamento" class="col-md-3 col-lg-3 control-label">
    		Departamento:</label>
    	<div class="col-md-3 col-lg-3">
    		<select id="cboDepartamento" name="cboDepartamento" class="form-control">
    		</select>
    	</div>
    </div>
    <div class="form-group row">
    	<label for="cboProvincia" class="col-md-3 col-lg-3 control-label">
    		Provincia:</label>
    	<div class="col-md-3 col-lg-3">
    		<select id="cboProvincia" name="cboProvincia" class="form-control">
    		</select>
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtJuzgado" class="col-md-3 col-lg-3 control-label">
    		Juzgado, MP o Inst:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtJuzgado" id="txtJuzgado" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtJuez" class="col-md-3 col-lg-3 control-label">
    		Juez:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtJuez" id="txtJuez" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtEspecialidad" class="col-md-3 col-lg-3 control-label">
    		Especialidad:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtEspecialidad" id="txtEspecialidad" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtSecretario" class="col-md-3 col-lg-3 control-label">
    		Secretario:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtSecretario" id="txtSecretario" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtOrgEmisor" class="col-md-3 col-lg-3 control-label">
    		Organismo Emisor:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtOrgEmisor" id="txtOrgEmisor" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="dpFechaRecepcion" class="col-md-3 col-lg-3 control-label">
    		Fecha de recepción en MP:</label>
    	<div class="col-md-3 col-lg-3">
    		<div class='input-group date' id="dpFechaRecepcion">
    			<input type="text" class="form-control" name="dpFechaRecepcion" />
    			<span class="input-group-addon glyphicon glyphicon-calendar"></span>
    		</div>
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtMotivoIngreso" class="col-md-3 col-lg-3 control-label">
    		Motivo de ingreso:</label>
    	<div class="col-md-3 col-lg-3">
    		<textarea name="txtMotivoIngreso" id="txtMotivoIngreso" rows="3" cols="7" class="form-control"></textarea>
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtProcedencia" class="col-md-3 col-lg-3 control-label">
    		Procedencia:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtProcedencia" id="txtProcedencia" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtFiscalia" class="col-md-3 col-lg-3 control-label">
    		Fiscalía:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtFiscalia" id="txtFiscalia" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtProceso" class="col-md-3 col-lg-3 control-label">
    		Proceso:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtProceso" id="txtProceso" class="form-control" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="cboDelito" class="col-md-3 col-lg-3 control-label">
    		Delito:</label>
    	<div class="col-md-3 col-lg-3">
    		<select id="cboDelito" name="cboDelito" class="form-control">
    		</select>
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtCargarOficio" class="col-md-3 col-lg-3 control-label">
    		Archivo Oficio:</label>
    	<div class="col-md-3 col-lg-3">
    		<%--<div class="input-group">
    			<input type="text" id="txtCargarOficio" name="txtCargarOficio" disabled="disabled"
    				class="form-control" />
    			<span class="input-group-addon glyphicon glyphicon-upload btn" id="btnCargarOficio"
    				title="Cargar oficio" style="font-size: 15px;"></span>
    		</div>--%>
    		<input type="file" class="form-control" name="fileOficio" id="fileOficio" accept=".pdf" />
    	</div>
    </div>
    <div class="form-group row">
    	<label for="txtFechaRegistro" class="col-md-3 col-lg-3 control-label">
    		Fecha de registro:</label>
    	<div class="col-md-3 col-lg-3">
    		<input type="text" name="txtFechaRegistro" id="txtFechaRegistro" disabled="disabled"
    			class="form-control text-center" />
    	</div>
    </div>
    <hr />
    <div class="form-group row">
    	<div class="col-md-12 col-lg-12">
    		<div id="alert-area">
    		</div>
    	</div>
    </div>
    <div class="form-group row">
    	<div class="col-md-12 col-lg-12">
    		<input type="submit" name="btnGrabarOficio" class="btn btn-primary btn-lg" id="btnGrabarOficio"
    			value="Grabar" />
    		<input type="button" name="btnLimpiarOficio" class="btn btn-primary btn-lg" id="btnLimpiarOficio"
    			value="Limpiar" />
    	</div>
    </div>
    </form>

    Este es Javascript de la configuración del validator

    $(document).ready(function () {
        $('#frmRegistroOficio').formValidation({
            framework: 'bootstrap',
            //message: 'El valor no es válido',
            icon: {
                //valid: 'glyphicon glyphicon-ok',
                //invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                txtOficio: {
                    validators: {
                        notEmpty: {
                            message: 'El número de oficio es requerido'
                        },
                        stringLength: {
                            min: 6,
                            max: 100,
                            message: 'Debe contener entre 6 y 100 caracteres'
                        }
                    }
                },
                txtJuzgado: {
                    validators: {
                        notEmpty: {
                            message: 'El juzgado es requerido'
                        },
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                txtJuez: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                txtEspecialidad: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                txtSecretario: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                txtOrgEmisor: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                txtMotivoIngreso: {
                    validators: {
                        notEmpty: {
                            message: 'El motivo de ingreso es requerido'
                        },
                        stringLength: {
                            min: 10,
                            max: 500,
                            message: 'Debe contener entre 10 y 500 caracteres'
                        }
                    }
                },
                txtProcedencia: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                txtFiscalia: {
                    validators: {
                        notEmpty: {
                            message: 'Fiscalía es requerido'
                        },
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                txtProceso: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: 'Puede contener hasta 200 caracteres'
                        }
                    }
                },
                fileOficio: {
                    validators: {
                        notEmpty: {
                            message: 'Archivo de oficio es requerido'
                        },
                        file: {
                            extension: 'pdf',
                            type: 'application/pdf',
                            //minSize: 1024 * 1024,
                            maxSize: 5 * 1024 * 1024,
                            message: 'Por favor seleccione un archivo pdf con un tamaño de hasta 5MB'
                        }
                    }
                }
            }
        }).on('success.form.fv', function (e) {
            // Prevent form submission
            e.preventDefault();
    
            // Get the form instance
            var $form = $(e.target);
    
            // Get the FormValidation instance
            var bv = $form.data('formValidation');
            $.fn.guardarRegistroOficio();
        });
    });

    Éste es el Javascript del botón Limpiar:

    $('#btnLimpiarOficio').bind('click', function (event) {
    	var type = 'post';
    	var async = true;
    	var timeout = $('#hfTimeoutRequest').val();
    	var url = 'RegistroOficio.aspx/Limpiar';
    	var data = '{}';
    	var dataType = 'json';
    	var contentType = 'application/json; charset=UTF-8';
    	var error = $.fn.uf_ajaxRequestFailed;
    	var success = function (response, status) {  // Función callback
    		if (status == 'success') {
    			var json = $.parseJSON(response.d);
    			var tipo = json.Type;
    			var mensaje = json.Data;
    
    			if (tipo == "E")
    				$.fn.uf_showError(mensaje);
    			else if (tipo == "I")
    				alert(mensaje);
    			else if (tipo == "C") {
    				// Setear fecha
    				var data = $.parseJSON(mensaje);
    				var fechaHoraServer = data.fechaHoraServerDB;
    				$('#txtFechaRegistro').val(fechaHoraServer);
    
    				// Deshabilitar pestaña de clientes
    				$('.nav-tabs > li:nth-child(3)').addClass('disabledTab').addClass('disabled');
    
    				// Deshabilitar pestaña de ips
    				$('.nav-tabs > li:nth-child(2)').addClass('disabledTab').addClass('disabled');
    
    				$('#frmRegistroOficio').bootstrapValidator('resetForm', true);
    				
    				//$('#frmRegistroOficio [data-fv-result]').attr('data-fv-result', 'NOT_VALIDATED');
    				$('[name=dpFechaRecepcion], select').val('');
    
    				$('#frmRegistroOficio').find('.has-error').removeClass('has-error');
    				$('#frmRegistroOficio').find('.has-success').removeClass('has-success');
    				//$('#frmRegistroOficio').find('.form-control-feedback').remove();
    
    				// Habilitar controles del tab1
    				$('#tab1').find(':text, textarea, select, input[type=file]').not('#txtCodLst, #cboProvincia, #txtFechaRegistro').removeAttr('disabled');
    				$.fn_uf_configuraCalendarioBootstrap('dpFechaRecepcion', 'DD/MM/YYYY', 'months', '01/01/1900', new Date(), true);
    
    				$('#txtOficio').focus();
    			}
    		}
    		else
    			alert(response.responseText);
    	};
    
    	var ajaxMessage = 'Limpiando';
    	$.fn.uf_ajaxRequest(ajaxMessage, type, async, timeout, url, data, dataType, contentType, success, error);
    });

    Por favor su apoyo, quizás deba hacer algo para solucionar este problema.

    Muchas gracias.



    • Editado eduar2083 martes, 5 de abril de 2016 18:06
    martes, 5 de abril de 2016 17:37

Respuestas

  • Después de tanto investigar pude dar con la solución. Faltaba la siguiente línea:

    $("#frmRegistroOficio").data('formValidation').resetForm();

    Esto al final de la configuración del validador.

    Quizás le sirva a alguien en algún momento.

    Saludos.


    martes, 5 de abril de 2016 23:57

Todas las respuestas

  • hola

    >>pero sucede que después de pulsar el botón limpiar para agregar un nuevo registro,

    como que el limpiar agregar un registro ? si pones un breakpoint en el codigo esta ingresando en el evento que realiza el boton de grabar

    >>la validación no funciona, ya que a pesar que los campos están vacíos, el botón submit lanza la petición al servidor

    de casualidad estas usando el UpdatePanel ? o sea cuando el boton graba se actualiza la seccion definida como template

    si es asi recuerda que al hacer un post (aunque sea de esa seccion) debes volver adjuntar los eventos cuando vuelve

    o sino usar el on() de jquery para adjuntar los eventos

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 5 de abril de 2016 18:30
  • >>Como que el limpiar agregar un registro ? si pones un breakpoint en el codigo esta ingresando en el evento que realiza el boton de grabar

    Leandro, a lo que me refiero es que después de grabar un registro y pulsar el botón Limpiar para restablecer todos los campos del formulario y así poder ingresar un nuevo registro pero es ahí donde el validador ya no funciona. El botón Limpiar en ningún momento graba un registro, pero sí realiza una petición ajax para traer la hora del Server y luego limpia los campos por Javascript. Pero el problema que quiero solucionar es porqué el validador no funciona después de grabar un primer registro

    >>>de casualidad estas usando el UpdatePanel ?

    No utilizo UpdatePanel porque no lo necesito.



    • Editado eduar2083 martes, 5 de abril de 2016 18:57
    martes, 5 de abril de 2016 18:56
  • Después de tanto investigar pude dar con la solución. Faltaba la siguiente línea:

    $("#frmRegistroOficio").data('formValidation').resetForm();

    Esto al final de la configuración del validador.

    Quizás le sirva a alguien en algún momento.

    Saludos.


    martes, 5 de abril de 2016 23:57
  • hola. Has probado a establecer Ajax al enviar el form en el submit?

    como ejemplo te paso

    $('#frmRegistroOficio').submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'<TU_URL_ACTION_CONTROLLER>',
            type:'post',
            data:$('#frmRegistroOficio').serialize(),
            success:function(){
                // Lo que quieras hacer 
            }
        });
    });


    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos

    domingo, 10 de abril de 2016 20:08
    Moderador