javascript - 现场验证无法正常工作

Question

我正在尝试迭代一组文本字段，我想看看这些字段是否已被用户增强。问题是，即使我已经为文本字段提供了值，但它就像我没有在文本字段中提供任何值一样。我提供了 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
}

JSFIDDLE

代码有问题吗？当从文本字段访问值时，它可以正确获取，但总是进入错误状态。为什么？

Answer 1

如果转换为 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;
    }
  });
});