我有一个包含两个文本框(textBox1,textBox2)的表.两个文本框都是必需的.如果我没有在textBox1中输入值并输入值textBox2,反之亦然,我应该收到一条错误消息.我们怎样才能用jQuery实现这个目标?
解决方法
我发现这样做的最简单方法是在文本框中添加一个类,例如’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.