我有一个HTML表单,其中包含一个表格,其中包含两个带复选框和输入文本字段的列。用户首先选中复选框,然后修改输入文本字段中的值。在提交此表单之前,我想验证用户输入。
我实现了这个验证功能:
<script type="text/javascript" charset="utf-8">
var error = false;
$('#form-id').submit(function (event) {
var pattern = /^[0-9]+$/;
alert(pattern); // 1st
var error = false;
$('#form-id input[type=checkbox]').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
if(sThisVal === 'on') {
var field = $(this).closest('td').siblings()
.find("input[type=text]")[0];
var value = field.value;
alert(value); // 2nd
var ok = pattern.test(value);
alert(ok); // 3rd
if( ! ok) {
error = true;
field.addClass('red-border');
} // if on ok
} // if checked
}); // foreach checkbox
return ! error;
});
直到第3次警报,一切都还可以。然后它在addClass
上失败并显示以下消息:
TypeError: 'undefined' is not a function
(evaluating 'field.addClass('red-border')')
所以字段是undefined
但是当我读取它的值时就可以了。
我在Javascript或JQuery中根本不是专家,但在阅读完文档后我无法理解为什么会这样。
答案 0 :(得分:2)
if( ! ok) {
应该if( !ok) {
没有空格!
而且,
return ! error;
应为return error = !error;
答案 1 :(得分:2)
更改这些行
var field = $(this).closest('td')
.siblings()
.find("input[type=text]");//jQuery object
var value = field[0].value; // field[0] is a native HTML element
错误是您尝试将addClass
, jQuery方法添加到原生HTML元素
请参阅此小提琴以获得解释:http://jsfiddle.net/codovations/tH5xc/
答案 2 :(得分:0)
它不是一个jquery对象尝试:
if(!ok) {
error = true;
field[0].addClass('red-border');
}
而不是:
if( ! ok) {
error = true;
field.addClass('red-border');
}