有一系列文本框,例如:
<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 中验证这一点?
非常感谢任何帮助!
最佳答案
我个人会使用 disabled
html 属性。
看到这个 jsFiddle Demo
<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
属性)
$('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;
}
关于javascript - 如何验证一系列文本框中的文本框值是否为空?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19182391/