字段验证工作不正常

Field validation not working properly

本文关键字：不正常 工作 验证 字段      更新时间：2023-09-26

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

代码有什么问题吗？当访问文本字段中的值时，它正确地获取了值，但始终进入错误状态。为什么？

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

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

要使条件仅适用于空文本框，当值为空且没有option子级时，条件应为true：

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

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

不必检查每个元素是否缺少option子元素，只需在获取元素时使用:not(select)即可筛选出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;
    }
  });
});

在中尝试AND而不是ORif (!$(this).val() && $(this).val().length === 0)

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

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

检查您想要完成的

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/

相关文章：