Texte validation du champ En utilisant Jquery

Question

Je champ 5 texte en 5 lignes comme ça ..

<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> 

ici tous les champs sont facultatifs .. Je veux mettre la validation comme si l'utilisateur veut saisir la valeur .. il ne peut pas sauter une ligne entre ... s'il veut saisir la valeur pour un champ texte, champ texte précédent doit avoir une valeur ..

validation se fera sur la soumission du formulaire

Answer 1

Essayez avec ce code:

$(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; 
    }); 
}); 

Voici un exemple de travail dans jsFiddle

Answer 2

-vous obtenir une meilleure expérience utilisateur en empêchant l'entrée dans les champs qui ne sont pas une valeur précédente? Si tous les champs sauf le premier sont désactivés par défaut, vous pouvez activer le suivant sur l'événement de flou.

$('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

emprunts fortement de la réponse de jSang et je ferais comme ceci:

$(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; 
    }); 
});