Проверка текстового поля Использование JQuery

У меня есть 5 текстовых полей в 5 таких строках.

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

здесь все поля необязательны. Я хочу поставить проверку, например, если пользователь хочет ввести значение. Он не может пропустить строку между ними... если он хочет ввести значение для текстового поля, в предыдущем текстовом поле должны быть имеют ценность..

проверка будет выполнена при отправке формы

Ответ 1

Попробуйте с помощью этого кода:

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

Вот рабочий пример в jsFiddle

Ответ 2

Не могли бы вы получить лучший пользовательский опыт, предотвратив ввод в полях, которые не имеют предшествующего значения? Если все поля, кроме первого, по умолчанию отключены, вы можете включить следующий в событии размытия.

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

Ответ 3

Тяжело заимствуя ответ от jSang, и я бы сделал это следующим образом:

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