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

Dis-allowed 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 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

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

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

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

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

    }

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

10 个答案: