我正在尝试迭代一组文本字段,我想看看这些字段是否已被用户增强。问题是,即使我已经为文本字段提供了值,但它就像我没有在文本字段中提供任何值一样。我提供了 JSFIDDLE,以便清楚地了解我正在解释的内容。
HTML 结构:
<div id='manage-appointment'>
<div class="span5">
<div class="control-group">
<label>first-name</label>
<div class="controls">
<input type="text" id="first-name" class="required" />
</div>
</div>
<div class="control-group">
<label>last-name</label>
<div class="controls">
<input type="text" id="last-name" class="required" />
</div>
</div>
<div class="control-group">
<label>email</label>
<div class="controls">
<input type="text" id="email" class="required" />
</div>
</div>
<div class="control-group">
<label>Operatorl</label>
<div class="controls">
<select id='options'>
<option value='op1'>Operator1</option>
</select>
</div>
</div>
<button id='press'>Check empty field</button>
</div>
Javascript:
document.getElementById('press').onclick = function()
{
var $dialog = $('#manage-appointment');
$dialog.find('.required').each(function()
{
if (!$(this).val() || $(this).has('option').length == 0)
{
$(this).parents().eq(1).addClass('error');
missingRequiredField = true;
}
});
}
CSS:
.error
{
background-color:red
}
代码有问题吗?当从文本字段访问值时,它可以正确获取,但总是进入错误状态。为什么?
最佳答案
如果转换为 bool 值时值为 false,或者该元素没有 option
子元素,则 if
语句中的条件为 true。
由于两个文本框都没有选项,因此将始终包含所有文本框。
要仅使空文本框的条件为 true,当值为空且没有 option
子项时,条件应为 true:
if ($(this).val() == '' && $(this).has('option').length == 0)
<小时/>
当您使用 jQuery 时,您也应该使用它来绑定(bind)事件。
您可以简单地使用 :not(select)
过滤掉 select
元素,而不是检查每个元素是否缺少 option
子元素获取元素。
正如 Kevin Simple 所示,您应该使用 parent
方法来查找元素的直接父元素。
正如 Jeff 指出的,您应该从元素中删除 error
类,以便在重新检查时删除指示。
$('#press').click(function() {
var elelments = $('#manage-appointment .required:not(select)');
elements.parent().removeClass('error');
elements.each(function() {
if ($(this).val() == '') {
$(this).parent().addClass('error');
missingRequiredField = true;
}
});
});
关于javascript - 现场验证无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33853489/