我正在尝试检查表单中每个输入元素的值。它不起作用。有人可以帮助我我在这里做错了什么吗?谢谢
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>
function formIsInvalid() {
var flag = false,
name, date;
$('.form--group').each(function() {
name = $(this).find('.thename').val();
date = $(this).find('.date_of_birth').val().length == 10;
if (name == "" || date == "") {
flag = true;
}
});
return flag
}
//Toggle disbaled class
$('.form--group').on('keyup','input', function() {
//use other static element or document if not works
$('#stepbirth').toggleClass('disabled', formIsInvalid());
});
最佳答案
您可以使用.trim()
方法删除值开始处的所有可用空间。并检查值是否存在。
实例:https://codepen.io/miladfm/pen/ZgKqNm
HTML
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>
CSS
#stepbirth.disabled {
color: #999;
}
JS
function formIsInvalid() {
var isFormInvalid = false;
$('.form--group').each(function() {
var name = $(this).find('.thename').val();
var date = $(this).find('.date_of_birth').val();
if (!name.trim() || !date.trim()) {
isFormInvalid = true;
}
});
return isFormInvalid
}
$('.form--group').on('keyup','input', function() {
$('#stepbirth').toggleClass('disabled', formIsInvalid());
});
关于javascript - 检查输入在每个类元素上是否具有值,然后切换禁用的类 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57288191/