texto de validación de campo usando jQuery

Question

tengo 5 campo de texto en 5 filas como esto ..

<div class="dt_distance_slab"> 
    <g:textField class ="number distanceSlab1" name="distanceSlabCost1" id = "distanceSlabCost1" value=""/> 
    </div> 
<div class="dt_distance_slab"> 
    <g:textField class ="number distanceSlab2" name="distanceSlabCost2" id = "distanceSlabCost2" value=""/> 
    </div> 
    <div class="dt_distance_slab"> 
    <g:textField class ="number distanceSlab3" name="distanceSlabCost3" id = "distanceSlabCost3" value=""/> 
    </div> 
    <div class="dt_distance_slab"> 
    <g:textField class ="number distanceSlab4" name="distanceSlabCost4" id = "distanceSlabCost4" value=""/> 
    </div> 
    <div class="dt_distance_slab"> 
    <g:textField class ="number distanceSlab5" name="distanceSlabCost5" id = "distanceSlabCost5" value=""/> 
    </div> 

aquí todos los campos son opcionales .. quiero poner la validación como si el usuario desea introducir el valor que .. no puede saltar una fila en el medio ... si quieren entrar valor para un campo de texto, campo de texto anterior debe tener valor ..

validación se hará sobre la presentación de la forma

Answer 1

intento con este código:

$(document).ready(function(){ 
    //assuming the validation fires on the click of a button 
    $("#btnSubmit").click(function(){ 
     //set valid variable to true 
     var blnIsValid = true; 
     //loop through each of the text boxes 
     $(":text[class^='number']").each(function(i){ 
      //start validating from the second text box 
      if(i > 0) { 
       var curTxtBox = $(this); 
       var prevTxtBox = $(":text[class^='number']:eq("+ (i-1) +")"); 
       if($.trim(curTxtBox.val()) != "" && $.trim(prevTxtBox.val()) == "") { 
        alert("Enter value for previous distance"); 
        //set focus on the text box 
        prevTxtBox.focus(); 
        //set valid variable to false 
        blnIsValid = false; 
        //exit the loop 
        return false; 
       } 
      } 
     }); 
     return blnIsValid; 
    }); 
}); 

Aquí está un ejemplo de trabajo en jsFiddle

Answer 2

¿Le obtener una mejor experiencia de usuario mediante la prevención de la entrada en los campos que no tienen un valor precedente? Si todos los campos, excepto el primero, están deshabilitados de manera predeterminada, puede habilitar el siguiente en el evento de desenfoque.

$('input:gt(1)').attr('disabled','disabled'); 
var fields = $('input'); 
$('input').blur(function(){ 
    var $this = $(this); 
    if($this.val() != ''){ 
    fields.eq($this.index()+1).attr('disabled',''); 
    } 
}); 

Answer 3

préstamos en gran medida de la respuesta de jSang y lo haría de la siguiente manera:

$(document).ready(function(){ 
    //assuming the validation fires on the click of a button 
    $("#btnSubmit").click(function(){ 
     var haveEmpty = false; 
     var blnIsValid = true; 
     $(":text[class^='number']").each(function(i){ 
      if($(this).val() != "") 
      { 
       if(haveEmpty) 
       { 
        blnIsValid = false; 
        //need to do something to let the user know validation failed here 
       } 
      } 
      else 
       haveEmpty = true; 
     }); 
     return blnIsValid; 
    }); 
});