我有一个函数可以返回表单中的每个文本输入是否都有值。
当我第一次制作这个功能时,它看起来像这样:
function checkInput(inputId) {
check = 0; //should be 0 if all inputs are filled out
for (var i=0; i < arguments.length; i++) { // get all of the arguments (input ids) to check
var iVal = $("#"+arguments[i]).val();
if(iVal !== '' && iVal !== null) {
$("#"+arguments[i]).removeClass('input-error');
}
else {
$("#"+arguments[i]).addClass('input-error');
$("#"+arguments[i]).focus(function(){
$("input").removeClass('input-error');
$("#"+arguments[i]).off('focus');
});
check++;
}
}
if(check > 0) {
return false; // at least one input doesn't have a value
}
else {
return true; // all inputs have values
}
}
这很好用,但是当我调用该函数时,我必须包含(作为一个强大的文本)我想要检查的每个输入的id:checkInput('input1','input2','input3')
。
这是我到目前为止所做的:
function checkInput() {
var inputs = $("input");
check = 0;
for (var i=0; i < inputs.size(); i++) {
var iVal = inputs[i].val();
if(iVal !== '' && iVal !== null) {
inputs[i].removeClass('input-error');
}
else {
inputs[i].addClass('input-error');
inputs[i].focus(function(){
$("input").removeClass('input-error');
inputs[i].off('focus');
});
check++;
}
}
if(check > 0) {
return false;
}
else {
return true;
}
}
当我调用该函数时,它会返回以下错误:
未捕获的TypeError:inputs [i] .val不是函数
我做错了什么?
答案 0 :(得分:2)
当你输入[i]时,这将返回一个html元素,因此它不再是一个jquery对象。这就是它不再具有该功能的原因。
尝试使用$()(如$(inputs [i])包装它以获取jquery对象,然后调用.val(),如:
$(inputs[i]).val()
如果您要在for循环中使用它,只需将其设置为变量:
var $my_input = $(inputs[i])
然后继续使用其他方法在循环中使用它:
$my_input.val()
$my_input.addClass()
等。
答案 1 :(得分:1)
如果你使用jquery .each()
函数,你可以做得更清洁一点:
$(document).ready(function() {
$('.submit').on('click', function() {
$('input').each(function() {
console.log('what up');
if($(this).val().length < 1 ) {
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
});
});
&#13;
.input-error {
background-color: pink;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<br/>
<a href="#" class="submit">SUBMIT</a>
&#13;
答案 2 :(得分:0)
这实际上是一个非常简单的修复方法。您需要在 jquery 构造函数$()
例如inputs[i].val()
到$(inputs[i]).val();
以下是完整的工作示例:
http://jsbin.com/sipotenamo/1/edit?html,js,output
希望有所帮助!
答案 3 :(得分:0)
这正是.eq()
方法的用途之一。而不是使用inputs[i]
,请使用以下内容:
// Reduce the set of matched elements to the one at the specified index.
inputs.eq(i)
给定一个表示一组DOM元素的jQuery对象,
.eq()
方法从该集合中的一个元素构造一个新的jQuery对象。提供的索引标识该元素在该集合中的位置。
答案 4 :(得分:0)
在这种情况下,我会使用jQuery.each()函数来循环表单元素。这将是修改后的代码
function checkInput() {
var $inputs = $("input"),
check = 0;
$inputs.each(function () {
val = $.trim($(this).val());
if (val) {
$(this).removeClass('input-error');
}
else {
$(this).addClass('input-error');
$(this).focus(function () {
$("input").removeClass('input-error');
$(this).off('focus');
});
check++;
}
});
return check == 0;
}