3

estoy haciendo una especie de validación, el proceso es que un usuario debe de registrarse y darle a siguiente hasta completar el registro, en total son 5 pasos, los 4 primeros pasos son ingreso de datos es decir solo hay inputs, select's y un input date, mientras que el paso 5 solo está un input file, y como tengo cada paso 2 botones de atras y siguiente en el paso 4 hice un onclick="validar()"

 <button type="button" class="next-form btn btn-primary" onclick="validar();">Siguiente</button>

para que pueda validar los campos e identifique que no estén vacios si un campo o varios campos están vacios al darle siguiente me debe de salir un alert dando un mensaje en general diciendo que los campos no están llenos, a continuacion el formulario se reiniciará y el usuario debería de llenar los campos correctamente...
se que es algo raro hacer estos eventos pero mi idea es que el usuario repita el proceso si no llena uno de los campos que son campos obligatorios

dejaré fotocapturas y el código:

Código JavaScript para validar campos he recortado el codigo ya que estoy validando cerca de 15 inputs

<script type="text/javascript">
function validar() {
    if ($('#vUserName').val().length == 0) {
        alertify.alert('Mensaje: Tenemos un Problema!','Mensaje de Error');
        $('#Preloader').modal('show');
        setTimeout("location.reload()", 15000);
    }
    if ($('#vEmailUsuario').val().length == 0) {
        alertify.alert('Mensaje: Tenemos un Problema!','Mensaje de Error');
        $('#Preloader').modal('show');
        setTimeout("location.reload()", 15000);
    }
    if ($('#vTelMovil').val().length == 0) {
        alertify.alert('Mensaje: Tenemos un Problema!','Mensaje de Error');
        $('#Preloader').modal('show');
        setTimeout("location.reload()", 15000);
    }
    var duration = 15;
    var msg = alertify.message('Error Registro Reiniciando Formulario en '+(--duration)+' seg.</big>', 15, function(){ clearInterval(interval);});
    var interval = setInterval(function(){
    msg.setContent('Error Registro Reiniciando Formulario en '+(--duration)+' seg.</big>');},1000);}</script>

Capturas del formulario

Formulario del PASO 1 introducir la descripción de la imagen aquí

El objetivo es que al presionar el boton siguiente del paso 4 identifique si los campos estan llenos o no

  • Si estan llenos entonces la pagina no se bloquea y no existe un reload total (osea una recarga de pagina para resetear todo desde el inicio) pero
  • si hay un campo vacio o mas de 1 campo vacio entonces bloquear la pagina sombreando en gris y recargando la pagina despues de 15 segundos

Formulario del PASO 4 Formulario Final Validando

Hasta aqui cumple con lo que hace si funciona las restinciones pero al pasar al paso 5 con los datos completos el mensaje de alert aun persiste y sigue la marca de 15 segundos introducir la descripción de la imagen aquí claro la funcion de reload no existe ya que esta adentro de cada if por lo que no se ejecuta, si pongo el mensaje de alert en cada if me da un error y se presentan mas de 20 mensajes alert debido a que en el if recorre cada uno, he intentado usar un else if pero solo identifica el primer campo el cual es nombre de usuario mientras que los demas no recorre x.X que podría hacer en este caso? alguna correccion ya que no sabria como darle la estructura de recorrer todos ellos pero que no sean todos sino que si hay campos vacios, notificar y recargar la pagina. Estaba intentando que en cada paso regresar al paso anterior pero no estoy usando wizard estoy emulando uno usando fieldset y con javascrip escondo cada paso cuando los botones son presionados

por si les interesa saber el codigo script que funciona como un wizard es este:

<script type="text/javascript">
$(document).ready(function() {
    var form_count = 1,
        previous_form, next_form, total_forms;
    total_forms = $("fieldset").length;
    $(".next-form").click(function() {
        previous_form = $(this).parent();
        next_form = $(this).parent().next();
        next_form.show();
        previous_form.hide();
    });
    $(".previous-form").click(function() {
        previous_form = $(this).parent();
        next_form = $(this).parent().prev();
        next_form.show();
        previous_form.hide();
    });
});</script>

De antemano doy las gracias a las posibles respuestas y correciones :D

1
  • lo que veo es que el usuario no deveria pasar a la siguiente etapa si no cumple con los criterios correspondientes, asi hace que el usuario ingres los valores en cada etapa y no tenga que repetir los proceso completo, ahora no esta demas hacer un check final y validacion completo del proceso es redundancia pero no seria erroneo. Con lo que te e comentado lo que aplicaria yo seria que el boton siguiente no fuera clickeable hasta que cumpla con las condiciones, y mostrarle al usuario graficamento por que no las cumple con un mensaje mostrarle que le falta x cambio o que no cumple x criterio.
    – Derleguan
    Commented el 9 ago. 2018 a las 19:14

1 respuesta 1

1

Hola amigo quieres validar si los campos estan vacios Aqui tengo un pequeño ejemplo revisalo.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form id="api_crud_form" name="api_crud_form" action="formget.php" method="get">

<label>Nombre:</label>

<input type="text" name="nombre" id="nombre">

<input type="submit" value="Enviar">

</form>
</body>
</html>

<script type="text/javascript">

 $('#api_crud_form').on('submit', function (event) {
            event.preventDefault();
            if ($('#nombre').val() == '') {
                alert("Ingresar Nombre");
            }            
    });


</script>

Tu Respuesta

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