的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

而不是OR尝试AND lazy val Core = project lazy val Server = project dependsOn(Core)

Answer 2

如果在转换为布尔值时值为false，或者该元素没有if个孩子，则option语句中的条件为真。

由于两个文本框都没有选项，因此将始终包含所有文本框。

要仅对空白的文本框使条件成立，当值为空且没有option个子项时，条件应为true：

if ($(this).val() == '' && $(this).has('option').length == 0)

当您使用jQuery时，您也应该使用它来绑定事件。

您无需检查每个元素是否缺少option个子元素，而只需在获取元素时使用select过滤掉:not(select)元素。

正如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;
    }
  });
});

Answer 3

JS / Jquery

$('#press').click(function(){

    $('input[type="text"]').each(function(index){
        // get Value of text node and trim of leading/ trailing white space 
        var textValue = $(this).val().trim();
        if (textValue.length === 0){
            $(this).parent().parent().addClass('error');
            var badcheck = true;
        } else {
             $(this).parent().parent().removeClass('error');
        }
    });
    // stop propegation
    if(badcheck){return false}

});

有几种方法可以做到这一点。这是另一种方式。 Updated Fiddle

Answer 4

检查这个你想要完成的事情

document.getElementById('press').onclick = function() 
{
   var $dialog = $('#manage-appointment');
   $dialog.find('.required').each(function()
    {
          if ($(this).val() == '' && $(this).has('option').length == 0)
           {
              $(this).parent().addClass('error');
              missingRequiredField = true;
           }
    });
}

这是jsfiddle：http://jsfiddle.net/letmedoit/oms32rhs/

现场验证无法正常工作

HTML结构：

的Javascript：

CSS：

4 个答案: