Как проверить, пустое ли текстовое поле в серии текстовых полей?

Question

Есть целый ряд текстовых полей, такие как:

<input type="text" class="jq-textBox" /> 
<input type="text" class="jq-textBox" /> 
<input type="text" class="jq-textBox" /> 
<input type="text" class="jq-textBox" /> 
<input type="text" class="jq-textBox" /> 

Пользователь может заполнить значения TextBox сверху вниз порядок. Требуется только первый текстовый блок, а все остальные текстовые поля являются необязательными.

разрешено для того, чтобы заполнить значения TextBox:

1st 
1st & 2nd 
1st, 2nd & 3rd 
and likewise in sequence order 

Диса разрешенного заказ:

2nd 
1st & 3rd 
1st, 2nd & 4th  

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

Как проверить это в javascript/jQuery?

Любая помощь очень ценится!

Answer 1

Вы можете перебирать список назад, чтобы быстро выяснить, есть ли пробел.

var last = false, 
    list = $(".jq-textBox").get().reverse(); 
$.each(list, function (idx) { 
    if ($(this).val() !== "") { 
     last = true; 
    } 
    else if (last) { 
     alert("you skipped one"); 
    } 
    else if (list.length === idx + 1) { 
     alert("must enter 1"); 
    } 
}); 

http://jsfiddle.net/rnRPA/1/

Answer 2

Попробуйте

var flag = false, valid = true; 
$('.jq-textBox').each(function(){ 
    var value = $.trim(this.value); 
    if(flag && value.length !=0){ 
     valid = false; 
     return false; 
    } 
    if(value.length == 0){ 
     flag = true; 
    } 
}); 

if(!valid){ 
    console.log('invalid') 
} 

Демо: Fiddle

Answer 3

Вы можете найти все входы, которые являются недопустимыми (заполняется перед предыдущим входом) таким образом:

function invalidFields() { 
    return $('.jq-textBox') 
    .filter(function(){ return !$(this).val(); }) 
    .next('.jq-textBox') 
    .filter(function(){ return $(this).val(); }); 
} 

Вы можете затем тест на срок действия:

if (invalidFields().length) { 
    // invalid 
} 

Вы можете изменить недопустимые поля:

invalidFields().addClass('invalid'); 

Чтобы требуется первое поле, просто добавьте атрибут HTML required к нему.

Answer 4

Я думаю, что более элегантное решение будет отображать только первое текстовое поле, а затем раскрыть второй раз есть некоторые входы в первом, а затем так далее (при вводе в второй - третий). Вы можете объединить это с другими решениями для тестирования текстовых полей.

Answer 5

Для обеспечения данных вводится во входные элементы в правильном порядке, вы можете настроить систему, которая изменяет disabled и readonly состояний соответственно:

/* Disable all but the first textbox. */ 
$('input.jq-textBox').not(':first').prop('disabled', true); 

/* Detect when the textbox content changes. */ 
$('body').on('blur', 'input.jq-textBox', function() { 
    var 
     $this = $(this) 
    ; 

    /* If the content of the textbox has been cleared, disable this text 
    * box and enable the previous one. */ 
    if (this.value === '') { 
     $this.prop('disabled', true); 
     $this.prev().prop('readonly', false); 
     return; 
    } 

    /* If this isn't the last text box, set it to readonly. */ 
    if(!$this.is(':last')) 
     $this.prop('readonly', true); 

    /* Enable the next text box. */ 
    $this.next().prop('disabled', false); 
}); 

JSFiddle demo.

При этом пользователь вынужден вводить более чем пустую строку во входное поле, прежде чем следующий ввод будет по существу «разблокирован». Затем они не могут вернуться назад и очистить содержимое предыдущего поля ввода, так как теперь оно будет установлено на readonly и может быть доступно только в том случае, если все следующие входы также очищены.

Answer 6

Я бы использовал персональный атрибут html disabled.
Посмотрите этот jsFiddle Demo

html

<form> 
    <input type="text" class="jq-textBox" required="required" /> 
    <input type="text" class="jq-textBox" disabled="disabled" /> 
    <input type="text" class="jq-textBox" disabled="disabled" /> 
    <input type="text" class="jq-textBox" disabled="disabled" /> 
    <input type="text" class="jq-textBox" disabled="disabled" /> 
    <input type="submit" /> 
</form> 

(Обратите внимание на атрибут required для HTML5)

jquery

$('input.jq-textBox').on('keyup', function(){ 
    var next = $(this).next('input.jq-textBox'); 
    if (next.length) { 
     if ($.trim($(this).val()) != '') next.removeAttr('disabled'); 
     else { 
      var nextAll = $(this).nextAll('input.jq-textBox'); 
      nextAll.attr('disabled', 'disbaled'); 
      nextAll.val(''); 
     } 
    } 
}) 

см Также nextAll() Jquery Meth спосо

Edit: Если вы хотите, чтобы скрыть disabled входы для того, чтобы показать их только тогда, когда предыдущий вход заполнен, просто добавьте этот css:

input[disabled] { 
    display: none; 
} 

Demo

Answer 7

JS

var prevEmpty = false; 
var validated = true; 

$(".jq-textBox").each(function(){ 
    if($(this).val() == ""){ 
     prevEmpty = true; 
    }else if($(this).val() != "" && !prevEmpty){ 
     console.log("nextOne"); 
    }else{ 
     validated = false;     
     return false; 
    } 
}); 

if(validated) 
    alert("ok"); 
else 
    alert("ERROR"); 

FIDDLE

http://jsfiddle.net/Wdjzb/1/

Answer 8

Возможно, что-то вроде этого:

var $all = $('.jq-textBox'), 
    $empty = $all.filter(function() { return 0 === $.trim(this.value).length; }), 
    valid = $empty.length === 0 
      || $empty.length != $all.length 
       && $all.index($empty.first()) + $empty.length === $all.length; 

// do something depending on whether valid is true or false 

Demo: http://jsfiddle.net/3UzHf/ (благодаря Arun P Johny для начальной скрипку).

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

Answer 9

Это то, что вам нужно:

http://jsfiddle.net/crew1251/jCMhx/

HTML:

<input type="text" class="jq-textBox" /><br /> 
<input type="text" class="jq-textBox" disabled/><br /> 
<input type="text" class="jq-textBox" disabled/><br /> 
<input type="text" class="jq-textBox" disabled/><br /> 
<input type="text" class="jq-textBox" disabled/> 

ЯШ:

$(document).on('keyup', '.jq-textBox:first', function() { 
    $input = $(this); 

if ($input.val()!='') 
{  
     $('input').prop('disabled',false);    
} 
else { 
     $('input:not(:first)').prop('disabled',true); 
} 

});