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

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

Answer 2

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

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 3

试试

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 4

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

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 5

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

Answer 6

为确保数据以正确的顺序输入到输入元素中，您可以设置一个系统来相应地修改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 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");

小提琴

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

演示：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/>

js:

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

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

});

Answer 10

    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;

    }