javascript - 如何验证一系列文本框中的文本框值是否为空？

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

用户可以按照从上到下的顺序填写文本框的值。只有第一个文本框是必需的，所有其他文本框都是可选的。

允许顺序填充文本框值:

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

不允许的顺序:

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

这意味着用户只需填写第一个文本框，也可以按顺序填写其他文本框。用户不能跳过一个文本框然后填写下一个文本框。

如何在 javascript/jQuery 中验证这一点？

非常感谢任何帮助!

Answer 1

我个人会使用 disabled html 属性。
看到这个 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>

(注意 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方法

编辑:如果您想隐藏 disabled 输入以便仅在前一个输入被填充时显示它们，只需添加此 css :

input[disabled] {
    display: none;
}

Demo