jQuery 循环遍历表中的所有文本框并检查值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3606456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loop through all textboxes inside a table and check value
提问by Ryan French
I have a table which contains two textboxes (textbox1 ,textbox2). Both of the textboxes are mandatory. If I don't enter value in textbox1 and enter value textbox2, or vice versa , I should get a error message. How can we achive this with jQuery?
我有一个包含两个文本框（textbox1，textbox2）的表格。这两个文本框都是必需的。如果我没有在 textbox1 中输入值并在 textbox2 中输入值，反之亦然，我应该收到一条错误消息。我们如何使用 jQuery 实现这一目标？
回答by Ryan French
The easiest way I found to do this is to add a class to your textbox such as 'requiredField'.
我发现这样做的最简单方法是向您的文本框添加一个类，例如“requiredField”。
<input type="text" class="requiredField" />
You can then get all required fields in the table using the 'find' function.
然后，您可以使用“查找”功能获取表中的所有必填字段。
textboxes = $('#tableid').find('.requiredField');
and then iterate over them using the 'each' function
然后使用“每个”函数迭代它们
textboxes.each(function() {
if(this.value.length==0){
//do something here
}
}
With something like this I usually color the border of the textbox red, and add an alert to tell the user they must complete all the required fields.
对于这样的事情，我通常将文本框的边框涂成红色，并添加一个警告来告诉用户他们必须完成所有必填字段。
Here is the final code.
这是最终的代码。
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;
You will also need to specify a 'requiredIncomplete' style in your CSS. What this will do is check all textboxes in the table to see if they contain data. If a textbox doesnt contain data it adds the 'requiredIncomplete' class to it (which contains some styling to set it apart from the other textboxes), otherwise it removes the class. It will then return true if all fields contain data or false if one of them is missing data.
您还需要在 CSS 中指定“requiredIncomplete”样式。这将做的是检查表中的所有文本框以查看它们是否包含数据。如果文本框不包含数据，它会向其中添加“requiredIncomplete”类（其中包含一些样式以将其与其他文本框区分开来），否则将删除该类。如果所有字段都包含数据，则返回 true，如果其中之一缺少数据，则返回 false。
回答by Ben Rowe
// create a custom jQuery expression filter, called :hasValue
jQuery.expr[':'].hasValue = function(elem, index, match) {
return jQuery(elem).val() !== '';
};
// textbox logic
if($('table textbox:hasValue').length !== 2) {
alert('error message');
}
回答by Haim Evgi
$("[id^=textboxid]").each(function(){
if ($(this).val().length > 0) {
// do something alert ...
}
}
);
this run over all textbox that the id start with textboxid , like textboxid1, textboxid2 ...
这会遍历所有以 textboxid 开头的文本框，例如 textboxid1、textboxid2 ...
回答by Yi Jiang
Assuming that you actually have a form, and would like this validation to occur on the submission of the form, first of all, add in your warning message:
假设您确实有一个表单，并且希望在提交表单时进行此验证，首先，添加您的警告消息：
<p class="warning">Both textboxes need to be filled</p>
Then, add in the following Javascript
然后，添加以下Javascript
$('form').submit(function(){
var inputValid = true;
$('form textarea').each(function(){
if(!this.value){
$('.warning').show();
return false;
}
});
});
This will, on the submission of the form, loop through all texteareas, and display the error message, as well as cancel the form submission if anyof the textareas in the form are not filled.
这将上提交的形式，通过所有环texteareaS，并显示错误信息，以及取消表单提交如果任何所述的textarea在表单的未填充。
回答by hahaha
Table Table1 = new Table(mainShell,SWT.BORDER);
Table1.setHeaderVisible(true);
Table1.setLinesVisible(true);
TableColumn tc1 = new TableColumn(Table1,SWT.NONE);
tc1.setText("Item");
tc1.setWidth(100);
TableColumn tc2 = new TableColumn(Table1,SWT.NONE);
tc2.setText("Value");
tc2.setWidth(120);
TableItem item1 = new TableItem(Table1,SWT.NONE);
item1.setText(0, "hahaha");
item1.setText(1, "haha");
Table1.setBounds(9, 174, 228, 128);
