Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Validacion con LocalStorage

Estas en el tema de Validacion con LocalStorage en el foro de Jquery en Foros del Web. Hola, tengo un sistema de captura de ordenes, en el que se guarda en LocalStorage la informacion del formulario, si no se completa el formulario ...
  #1 (permalink)  
Antiguo 18/12/2014, 14:49
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 10 meses
Puntos: 2
Pregunta Validacion con LocalStorage

Hola, tengo un sistema de captura de ordenes, en el que se guarda en LocalStorage la informacion del formulario, si no se completa el formulario y se cierra el navegador, el usuario podra recuperar la informacion al abrir nuevamente la pagina, ellos podran elegir si la quieren recuperar o no, (suena raro, pero ya ven como son los usuarios), si el usuario completa satisfactoriamente la captura de la orden, se limpian las variables y al entrar a capturar una orden, no se mostrara ningun mensaje.

Para guardar cada campo, lo hice con el evento ONBLUR, el detalle esta en que si por ejemplo solo presiono tab para ir cambiando de campos, dejandolos vacios, y refresco la pagina, me aparece la alerta de si deseo recuperar la orden, aunque esten vacios.

Deje solo la validacion del campo evento, y un boton para ver que es lo que me trae despues de hacer blur en el mismo campo.

Si lo presiono antes del blur, muestra un NULL, pero si lo hago despues del blur, no muestra nada. Ya intente agregar un != '', pero no funciona como deberia.

espero haberme explicado bien
  #2 (permalink)  
Antiguo 18/12/2014, 14:50
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: Validacion con LocalStorage

Código HTML:
 <div id="page-wrapper">
            
            <div class="row" style="padding-top:20px;">
            <?php if(isset($secreo_ord)){ ?>
                <div style="margin-top:15px;" class="alert alert-<?php echo ($secreo_ord['tipo']=='success')? 'success':'danger' ?>" role="alert"><strong><?php echo $secreo_ord['info']; ?></strong></div>
            <?php } ?>
            <form id="form-crearorden" method="post" action="<?php echo base_url('fotografos/crearOrdenAction') ?>" class="form-horizontal">
					<fieldset>
						<legend>Captura de orden</legend>
                        
                        <div class="form-group">
							<label class="col-sm-3 control-label">Sección:</label>
							<div class="col-lg-3">
								<select class="form-control input-sm" name="seccion" id="select_seccion">
									<option value="">---Seleccione la sección---</option>
                                    <option value="COM">Comerciales</option>
                                    <option value="DEP">Deportes</option>
                                    <option value="ESC">Escena</option>
                                    <option value="SOC">Sociales</option>
								</select>
							</div>
						</div>
                        
                        <div class="form-group">
							<label class="col-sm-3 control-label">Fotógrafo:</label>
							<div class="col-lg-3">
								<select class="form-control clasecillaj input-sm" name="fotografo" id="id_fotografo" >
									<option value="">-- Seleccione el fotógrafo --</option>
									<!-- Agregados con JSON -->                                    
								</select>
							</div>
						</div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">Fecha:</label>
                            <div class="col-sm-3">
                                <input onBlur="guardadatos()" type="text" name="fecha" id="input_date" class="form-control clasecillaj input-sm">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Hora: (formato 24hrs)</label>
                            <div class="col-sm-3">
                                <input type="text" name="horade" id="input_timede" class="form-control clasecillaj input-sm">
                            </div>

                        </div>
                        
                        <div style="margin:0;" id="fotografo_ocupado"></div>

                        <div class="form-group">
							<label class="col-sm-3 control-label">Evento / Pago:</label>
							<div class="col-sm-3">
								<input onBlur="guardadatos()" type="text" class="form-control input-sm" name="pago" id="input_pago" />
							</div>
						</div>
						
						<div class="form-group" id="div_pago">
						<input type="hidden" name="haypago" value="si" id="bandera" />
                            <label class="col-sm-3 control-label">Liquidado:</label>
                            <div class="col-sm-3">
                                <input type="checkbox" value="1" name="liquidado" id="check_liquidado"/>
							</div>
						</div>
                        <div class="form-group">
							<label class="col-sm-3 control-label">Nombre del evento:</label>
							<div class="col-sm-6">
								<input onBlur="guardadatos()" id="input_nevento" type="text" class="form-control input-sm" name="evento" />
							</div>
						</div>
                        <div class="form-group">
							<label class="col-sm-3 control-label">Contacto:</label>
							<div class="col-sm-6">
								<input onBlur="guardadatos()" id="input_contacto" type="text" class="form-control input-sm" name="contacto1" />
							</div>
						</div>
                        <div class="form-group">
							<label class="col-sm-3 control-label">Teléfono 1:</label>
							<div class="col-sm-6">
								<input onBlur="guardadatos()" id="input_teluno" type="text" class="form-control input-sm" name="telefono1" />
							</div>
						</div>
                        <div class="form-group">
							<label class="col-sm-3 control-label">Teléfono 2:</label>
							<div class="col-sm-6">
								<input onBlur="guardadatos()" id="input_teldos" type="text" class="form-control input-sm" name="telefono2" />
							</div>
						</div>
                        <div class="form-group">
							<label class="col-sm-3 control-label">Dirección:</label>
							<div class="col-sm-6">
								<input onBlur="guardadatos()" id="input_direccion" type="text" class="form-control input-sm" name="direccion" />
							</div>
						</div>
                        <div class="form-group">
							<label class="col-sm-3 control-label">Comentarios:</label>
							<div class="col-sm-6">
                            	<textarea onBlur="guardadatos()" id="input_comentarios" class="form-control" name="comentarios" rows="5"></textarea>
								<!--<input type="text" class="form-control" name="comentarios" />-->
							</div>
						</div>
					</fieldset>
                    <input type="button" value="PRESIONAR!!!" onclick="vervalorechingao();">
					<div class="form-group">
						<div class="col-sm-9 col-sm-offset-3">
							<button onclick="limpiar()" type="submit" name="send" value="ok" class="btn btn-sm btn-primary">Guardar</button>
						</div>
					</div>
				</form>
            </div>
        </div>

    </div><!-- fin </div id="wrapper"> -->

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    <script src="<?php echo base_url('assets/js/jquery-ui-timepicker-addon.min.js') ?>"></script>
    <script src="<?php echo base_url('assets/js/bootstrapValidator.js') ?>"></script>
    <script src="<?php echo base_url('assets/js/plugins/metisMenu/metisMenu.min.js') ?>"></script>
    <script src="<?php echo base_url('assets/js/sb-admin-2.js') ?>"></script>
   
  #3 (permalink)  
Antiguo 18/12/2014, 14:51
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: Validacion con LocalStorage

Código HTML:
<script>
    
$(function() {
    $('#div_pago').hide();  
    $('#select_seccion').change(function(){
        if($('#select_seccion').val() == 'SOC') {
            $('#div_pago').show();
        } else {
			$('#check_liquidado').prop('checked', false);
            $('#div_pago').hide();
        } 
    });
});
    
$.getJSON('<?php echo base_url('assets/jsones/fotografos_selectoptions.json') ?>', function(data){         
    var len = data.length;
    var html = [];

    for (var i = 0, len = data.length; i < len; i++) {
        html[html.length] = "<option value=";
        html[html.length] = data[i].nick;
        html[html.length] = ">";
        html[html.length] = data[i].nombre;
        html[html.length] = "</option>";
    }
    $("select#id_fotografo").append(html.join(''));
});
    
	$('#input_timede').timepicker({
		timeFormat: 'HH:mm',
	});	

	$('#input_date').datepicker({
		dateFormat: 'yy-m-dd'
	});
    
    function vervalorechingao(){
        
        alert (localStorage.getItem("LSnevento"));
        
    }
    
function guardadatos(){

    localStorage.setItem("LSfecha",$( "#input_date" ).val());
    localStorage.setItem("LSpago", $( "#input_pago" ).val());
    localStorage.setItem("LSnevento", $( "#input_nevento" ).val());
    localStorage.setItem("LScontacto", $( "#input_contacto" ).val());
    localStorage.setItem("LSteluno", $( "#input_teluno" ).val());
    localStorage.setItem("LSteldos", $( "#input_teldos" ).val());
    localStorage.setItem("LSdireccion", $( "#input_direccion" ).val());
    localStorage.setItem("LScomentarios", $( "#input_comentarios" ).val());
}
if (localStorage.getItem("LSnevento") !== null) {

    var answer = confirm("Anteriormente estabas creando una orden y no se guardó, Nombre del evento: " + localStorage.getItem("LSnevento") + " ¿deseas recuperarla?")
    if (answer) {

        $('#input_date').val(localStorage.getItem("LSfecha"));
        $('#input_pago').val(localStorage.getItem("LSpago"));
        $('#input_nevento').val(localStorage.getItem("LSnevento"));
        $('#input_contacto').val(localStorage.getItem("LScontacto"));
        $('#input_teluno').val(localStorage.getItem("LSteluno"));
        $('#input_teldos').val(localStorage.getItem("LSteldos"));
        $('#input_direccion').val(localStorage.getItem("LSdireccion"));
        $('#input_comentarios').val(localStorage.getItem("LScomentarios"));

    } else {

        localStorage.removeItem("LSfecha");
        localStorage.removeItem("LSpago");
        localStorage.removeItem("LSnevento");
        localStorage.removeItem("LScontacto");
        localStorage.removeItem("LSteluno");
        localStorage.removeItem("LSteldos");
        localStorage.removeItem("LSdireccion");
        localStorage.removeItem("LScomentarios");

    }     

}
function limpiar(){
    localStorage.removeItem('LSfecha');
    localStorage.removeItem('LSpago');
    localStorage.removeItem('LSnevento');
    localStorage.removeItem('LScontacto');
    localStorage.removeItem('LSteluno');
    localStorage.removeItem('LSteldos');
    localStorage.removeItem('LSdireccion');
    localStorage.removeItem('LScomentarios');
}
    
$(document).ready(function() {
    $('#form-crearorden')
        .bootstrapValidator({
            
            fields: {
                seccion: {
                    validators: {
                        notEmpty: {
                            message: 'Campo requerido'
                        }
                    }
                },
                fecha: {
                    validators: {
                        
                        notEmpty: {
                            message: 'Campo requerido'
                        },
                        date: {
                            format: 'YYYY-MM-DD',
                            message: 'Formato de fecha invalido'
                        }
                    }
                },
                evento: {
                    validators: {
                        notEmpty: {
                            message: 'Campo requerido'
                        }
                    }
                },
                telefono1: {
                    validators: {
                        integer: {
                            message: 'Numero no valido'
                        },
                        stringLength: {
                            min: 7,
                            max: 13,
                            message: 'Formato de numeros telefonicos: 6311297, 6563760395, 044656940510'
                        }
                    }
                },
                telefono2: {
                    validators: {
                        integer: {
                            message: 'Formato de numeros telefonicos: 6311297, 6563760395, 044656940510'
                        },
                        stringLength: {
                            min: 7,
                            max: 13,
                            message: 'Numero no valido'
                        }
                    }
                }
            }
        });
    
    $('.clasecillaj').change(function(){
			$("#fotografo_ocupado").load("<?php echo base_url('fotografos/alertfile') ?>",{
				fotografo: $("#id_fotografo").val(),
			   	fecha: $("#input_date").val(),
			   	hora: $("#input_timede").val()
			});
		});
});
</script> 
No cabia el codigo completo, lo tuve que poner en 2 partes.
  #4 (permalink)  
Antiguo 18/12/2014, 18:36
Avatar de omar_gutierrez  
Fecha de Ingreso: febrero-2011
Mensajes: 144
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: Validacion con LocalStorage

Lo que hice fue esto en la funcion guardadatos():

Código:
function guardadatos(){

    if($( "#input_date" ).val() != '' ) { localStorage.setItem("LSfecha",$( "#input_date" ).val()); }
    if($( "#input_pago" ).val() != '' ) { localStorage.setItem("LSpago", $( "#input_pago" ).val()); }
    if($( "#input_nevento" ).val() != '' ) { localStorage.setItem("LSnevento", $( "#input_nevento" ).val()); }
    if($( "#input_contacto" ).val() != '' ) { localStorage.setItem("LScontacto", $( "#input_contacto" ).val()); }
    if($( "#input_teluno" ).val() != '' ) { localStorage.setItem("LSteluno", $( "#input_teluno" ).val()); }
    if($( "#input_teldos" ).val() != '' ) { localStorage.setItem("LSteldos", $( "#input_teldos" ).val()); }
    if($( "#input_direccion" ).val() != '' ) { localStorage.setItem("LSdireccion", $( "#input_direccion" ).val()); }
    if($( "#input_comentarios" ).val() != '' ) { localStorage.setItem("LScomentarios", $( "#input_comentarios" ).val());}
}
Solo modifique la condicion que recoge el localstorage para contemplar mas campos y listo.

Igual espero y le sirva a alguien.

Etiquetas: campos, javascript, localstorage, validacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:05.