遍历表中的所有文本框并检查值

Question

我有一个包含两个文本框(textbox1,textbox2)的表.两个文本框都是必需的.如果我没有在textbox1中输入值并输入值textbox2,反之亦然,我应该收到一条错误消息.我们怎样才能用jQuery实现这个目标？

Answer 1

我发现这样做的最简单方法是在文本框中添加一个类,例如'requiredField'.

<input type="text" class="requiredField" />

然后,您可以使用"查找"功能获取表格中的所有必填字段.

textboxes = $('#tableid').find('.requiredField');

然后使用'each'函数迭代它们

textboxes.each(function() {
    if(this.value.length==0){
        //do something here
    }
}

有了这样的东西,我通常会将文本框的边框涂成红色,并添加一个警告,告诉用户必须填写所有必填字段.

这是最终的代码.

requiredFields = $('#tableid').find('.requiredField');
var allFieldsComplete = true;
requiredFields.each(function(index) {
    if (this.value.length == 0) {
        $(this).addClass('requiredIncomplete');
        allFieldsComplete = false;
    } else {
        $(this).removeClass('requiredIncomplete');
    }
});
if(!allFieldsComplete){
    alert('Please complete all required fields');
}
return allFieldsComplete;

您还需要在CSS中指定"requiredIncomplete"样式.这将做的是检查表中的所有文本框,看它们是否包含数据.如果文本框不包含数据,则会向其添加"requiredIncomplete"类(其中包含一些样式以将其与其他文本框区分开),否则将删除该类.如果所有字段都包含数据,则返回true;如果其中一个字段缺少数据,则返回false.