How to order IF and ELSE IF to check values taking into account the order in which they obtain

2

I have three text boxes called DATO1 DATO2 DATO3 , I would like to check that they were not empty, the problem that arises is that I want to check whether they are filled in order or not. (DATA1 -> DATA2 -> DATA3)

Since, since I have the script, it checks if I fill DATA1 then DATA2, and it shows its respective messages, but if the person fills DATA2, it does not check DATA1.

How can I order the IF to check the 3 text boxes:

Note: respuesta.obtuvo is a value obtained by JSON, if it gives 0, that is to say that some field of DATA was not filled, because when a DATA is filled, it brings with it other values.

Here my code:

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();
    }
    }
    
asked by Victor Alvarado 15.03.2017 в 13:25
source

4 answers

0

The solution was to apply the following before obtaining the 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
     }

then we pass the data with 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" );
     }

Since placing it before executing JSON it checks that all the data is full, once they are valid if I execute the JSON to obtain the final data4.

For this add a button called Validator that calls the function: validarDatos();

    
answered by 25.04.2017 / 15:19
source
1

I think it can be as easy as you do the three checks at once:

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

Would it serve you that way?

    
answered by 15.03.2017 в 13:28
1

It would be enough to put this line substituting your if :

$('input:text[value=""]').first().focus();
The problem I had was that [value=""] is only valid if it has the attribute and you do not have it in yours.

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

Find the first input that has a% co_of% empty.

I would put the value in a div, so that you do not take all of the page, as they say in the comments.

UPDATE:

Putting this, inputs say that just take the ID that begins with "data" and then filter for empty value (and so are those who have [id^="dato"] as those who do not have an attribute value="" ).

In this way it is valid for any number of inputs that you want to check, and thus not to add more and more value

Staying all:

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()">
    
answered by 15.03.2017 в 13:42
1

I would improve the ValidateData method this way:

function validarDatos(){

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

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

}
    
answered by 25.04.2017 в 16:00