2

Tengo tres cajas de texto llamdas DATO1 DATO2 DATO3, quisiera comprobar que no estuvieran vacías, el problema que me surge es que quiero que se compruebe tanto si se llenaran en orden o no. (DATO1 -> DATO2 -> DATO3)

Ya que, como tengo el script comprueba si lleno DATO1 luego DATO2, y muestra sus respectivos mensajes, pero si la persona llena DATO2, no comprueba DATO1.

Como puedo ordenar el IF para que compruebe las 3 cajas de texto:

Nota: respuesta.obtuvo es un valor obtenido por JSON, si da 0, es decir que algun campo de DATO no fue llenado, porque al llenarse un DATO, este trae consigo otros valores.

Aqui mi codigo:

HTML:

DATO1
<input type="text" name="dato1" id="dato1">
DATO2
<input type="text" name="dato2" id="dato2">
DATO3
<input type="text" name="dato3" id="dato3">

jQuery

if(respuesta.obtuvo==0)
{
    alert("Debe ingresar los datos de lo incurridos en la falta");
    $('select[name=medida]').val(0);

    if ($('#dato1').val()=="")  {
      $("#dato1").focus();
    }

    if ($('#dato2').val()=="") {
      $("#dato2").focus();
    }

    if ($('#dato3').val()=="") {
      $("#dato3").focus();
    }
    }
3
  • ¿Quieres que obligatoriamente se ingresen los valores de forma secuencial?
    – gugadev
    Commented el 15 mar. 2017 a las 14:34
  • Victor, qué error te da con mi codigo?
    – lois6b
    Commented el 16 mar. 2017 a las 7:00
  • no comprueba que el tercer dato este vacio
    – Dev 200
    Commented el 16 mar. 2017 a las 11:54

4 respuestas 4

1

Creo que puede ser tan fácil como que hagas las tres comprobaciones de golpe:

if ($('#dato1').val()=="")  {
  $("#dato1").focus();
} else if ($('#dato2').val()=="") {
  $("#dato2").focus();
} else if ($('#dato3').val()=="") {
  $("#dato3").focus();
}

¿Te serviría así?

5
  • lo habia pensado asi, el problema es el siguiente: Cuando alguien llena un dato, este se pone DISABLED, si llenan el dato1 y luego haces focus al DATO1 solo subira el scroll y no marcara nada. Quisiera que el valor que este vacio sea el marcado
    – Dev 200
    Commented el 15 mar. 2017 a las 12:29
  • Pero entonces hay algo que se me escapa. Si quieres que ponga el foco en la que te falte, como lo tenías está bien. Creo que hay algo que se me escapa. Commented el 15 mar. 2017 a las 12:31
  • El problema es por el orden de procesamiento del codigo. Si esta vacia la primera se cumple el 1er IF, como la 2da esta vacia tambien te pasa al 2do if, y como la tercera esta vacia, te pasa al tercer if: por lo tanto te deja en el tercero. Si meto el 2do IF como else IF, y tratan de llenar el 2do primero no te comprobara los otros, pues debe estar el rpimero vacio
    – Dev 200
    Commented el 15 mar. 2017 a las 12:38
  • Te he modificado la respuesta. Creo que te valdría concatenandolas con un else, así solo se pararía en el primero que encontrase. Commented el 15 mar. 2017 a las 13:00
  • no comprueba el 3ra dato
    – Dev 200
    Commented el 15 mar. 2017 a las 13:16
1

Bastaria con poner esta linea sustituyendo tus if:

$('input:text[value=""]').first().focus();
El problema que tenia era que [value=""] solo vale si tiene el atributo y tu en los tuyos no lo tiene.

$('input:text[id^="dato"]').filter(function(){
            return $(this).val().length==0;
          }).first().focus();

Busca el primer input que tenga un value vacio.

Yo meteria los inputs en un div, para que no te coja todos los de la pagina, tal y como dicen en los comentarios.

UPDATE:

Poniendo esto, [id^="dato"] digo que solo coja los de ID que empiece por "dato" y luego hago filtro por valor vacio( y asi valen tanto los que tienen value="" como los que no tienen un atributo value).

De esta manera vale para cualquier numero de inputs que quieras comprobar, y asi no ir añadiendo mas y mas ifs

Quedando todo:

function validar() {

  var respuesta = 0

  if (respuesta == 0) {
    alert("Debe ingresar los datos de lo incurridos en la falta");


    $('input:text[id^="dato"]').filter(function() {
      return $(this).val().length == 0;
    }).first().focus();

    $('select[name=medida]').val(0);

  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

DATO1
<input type="text" name="dato1" value="adsfdaf" id="dato1"> <br> DATO FALSO
<input type="text" name="dato1" value="" id="DatoFalso"><br> DATO2
<input type="text" name="dato2"  id="dato2"> <br> DATO3
<input type="text" name="dato3"  id="dato3">

<br>
<input type="button" value="validar" onclick="validar()">

2
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – user227
    Commented el 15 mar. 2017 a las 20:44
  • @LuiggiMendoza habia muchos comentarios obsoletos que borrados dejarian un par de comentarios solo y no seria extenso. El OP no los fue borrando.
    – lois6b
    Commented el 16 mar. 2017 a las 7:10
1

Yo mejoraría el método ValidarDatos de esta manera:

function validarDatos(){

 foreach(var i =1; i <= 3; i++)
 {
    var element = $("#dato"+i);

    if(element.val() == "")
    {
         element.focus()
         return false;
    }
 }

}
1
  • Excelente, la cosa es que acostumbro a publicar los nombres de las variables distintos a los que uso, en mi caso, no tengo dato1 , dato2, dato, sino distintas otras vairables, pero apruebo tu mejora :)
    – Dev 200
    Commented el 25 abr. 2017 a las 14:42
0

La solución fue aplicar lo siguiente antes de obtener el JSON:

     function validarDatos(){

     var dato1=$('#dato1').val();
     var dato2=$('#dato2').val();
     var dato3=$('#dato3').val();

     if(dato1==""){
           $('#dato1').focus();
           return false
     }

     if(dato2==""){
           $('#dato2').focus();
           return false
     }

     if(dato3==""){
           $('#dato3').focus();
                return false
     }

luego pasamos los datos con un let data

     let data = { 

     dato1: $('#dato1').val(),
     dato2: $('#dato2').val(),
     dato3: $('#dato3').val()
     };

     $.post("/miarchivo.php", data , function( respuesta ) 
     {
     if(respuesta.obtuvo==0)
     {
          alert("Error al obtener");
     }else {
          alert("Aqui obtengo el dato final"); 
     }
     }
     }, "json" );
     }

Ya que al colocarlo antes de de ejecutar JSON este comprueba que estén todos los datos llenos, una vez estan validos si ejecuto el JSON para obtener el dato4 final.

Para esto agregue un boton llamado Validador que llama a la funcion: validarDatos();

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.