如何验证文本框值在一系列文本框中是否为空

我个人会使用 disabled html 属性。
看这个 jsFiddle 演示

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

（请注意 HTML5 的 required 属性）

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 Method

编辑：如果要隐藏disabled输入以便仅在填充上一个输入时显示它们，只需添加此css：

input[disabled] {
    display: none;
}

演示

您可以向后迭代列表以快速确定是否存在差距。

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/

尝试

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')
}

演示：小提琴

您可以通过以下方式找到所有无效的输入（在上一个输入之前填写）：

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即可。

我认为更优雅的解决方案是只显示第一个文本框，然后在第一个文本框中有一些输入时显示第二个文本框，然后依此类推（当他们输入第二个文本框时，显示第三个）。 您可以将其与其他解决方案结合使用来测试文本框。

为了确保数据以正确的顺序输入到输入元素中，您可以设置一个系统来相应地修改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 ，并且只有在所有后续输入也被清除的情况下才能访问。

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");

小提琴

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

也许是这样的：

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

演示：http://jsfiddle.net/3UzHf/（感谢Arun P Johny的首发小提琴）。

也就是说，如果第一个空项的索引加上空项总数加起来就是项总数，则所有空项都必须位于末尾。

这是你需要的：

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

.js：

$(document).on('keyup', '.jq-textBox:first', function () {
   $input = $(this);
if ($input.val()!='')
{      
       $('input').prop('disabled',false);              
}
else {
       $('input:not(:first)').prop('disabled',true);
}
});

    var checkEmpty = function ()
    {
        var formInvalid = false;
        $('#MyForm').each(function () {
            if ($(this).val() === '') {
                formInvalid = true;
            }
        });
        if (formInvalid) {
            alert('One or more fields are empty. Please fill up all fields');
            return false;
        }
        else
            return true;
    }