Проверка текстового поля с использованием Jquery - PullRequest
Новая
       7

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

12 голосов
/ 02 сентября 2011

У меня есть 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>

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

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

Ответы [ 3 ]

6 голосов
/ 02 сентября 2011

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

$('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','');
  }
});
4 голосов
/ 02 сентября 2011

Попробуйте с этим кодом: 

$(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 голосов
/ 02 сентября 2011

Сильно заимствуя из ответа 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;
    });
});
...