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

有一系列文本框，如：

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

不允许的订单：

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

---

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

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

非常感谢您的帮助

试试看

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属性添加到该字段。

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

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

---

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

为了确保数据以正确的顺序输入到输入元素中，您可以设置一个系统，相应地修改禁用的

和只读的
状态：

/* 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);
});


在下一个输入基本上“解锁”之前，用户被迫在输入字段中输入多个空字符串。然后，他们无法返回并清除以前输入字段的内容，因为该字段现在将设置为
只读
，并且只有在清除了以下所有输入后才能访问。
我将个人使用
禁用
html属性。

请参见此


另请参见jquery方法

编辑：
如果要隐藏禁用的
输入，以便仅在前一个输入已填充时显示它们，只需添加以下内容：

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

小提琴

可能是这样的：

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

演示：（感谢阿伦·p·约翰尼的首发小提琴）

也就是说，如果第一个空项目的索引加上清空的总数加起来等于项目总数，那么所有清空的项目都必须在末尾。
这就是您需要的：


html:

+1.我想到的第一件事也是在
.next（）
中使用双
.filter（）
。但后来我想，“如果结构改变了，元素不是真正的兄弟元素，所以我不能使用
.next（）
？”这对于空字符串是失败的。试试看“这意味着用户只需要填写第一个文本框，或者可以按顺序填写其他文本框。”呵呵，我没说到这一点。现在情况清楚多了。谢谢“用户不能跳过一个文本框，然后填充下一个。”挂起你自己，我已经完成了。这将遍历“MyForm”表单中的所有文本框，并在任何文本框为空时发出警报。按下保存键时，可以调用此函数
$('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('');
        }
    }
})

input[disabled] {
    display: none;
}

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

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

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

});

    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;

    }