Question

我查看了很多帖子，并没有找到一个似乎有效的解决方案......在这一点上变得有点沮丧，所以我想我是否会看到其他人有解决方案。

所以，我正在尝试在我正在创建的小部件上验证属性为“required”的字段，问题是当用户单击“创建”按钮时，它会创建一个新的可见部分并且还会重复它出于各种原因隐藏在“hide”类中。

我的验证码如下所示：

var $required = $("input[required]").css('border', '1px solid #CCC');
    $invalid = $required.filter(function(){
        return !this.value;
    }).css('border', '1px solid red');

if($invalid.length){
    alert('Please fill in all required fields');
} else {
    //ajax call
}

这适用于我所有其他小部件，但由于这个新小部件中有隐藏的副本，它会传递可见字段但在隐藏字段上失败。

我的解决方案是在“if”语句中添加第二部分以搜索invalid是否具有长度并且如果其父元素不具有该类“隐藏”。但是，将语句更改为以下内容似乎不起作用：

if( $invalid.length && !$("input[required]").closest("li").hasClass("hide") ){
    alert('Please fill in all required fields');
} else {
    //ajax call
}

现在似乎每次都过去了......

我试图验证的元素的（一般）结构是 - 我删除了大部分代码，只是为了简化它的查看：

<li>
    <div class="row-fluid>
        <div class="span3">
            <!-- Some content -->
        </div>
        <div class="span9">
            <input type="text" required />
            <input type="text" />
            <input type="text" />
        </div>
    </div>
</li>

隐藏元素遵循相同的结构，只有

<li class="hide">

作为父元素，而不是。

我认为我的jQuery的语法有问题，但我一直试图解决这个问题已经很久了，因为我可能只是忽略了一些非常简单的东西...... < / p>

思考？ ;）

Answer 1

您的if语句正在测试所需元素的无是否在隐藏的LI中，因为hasClass("hide")如果任何所选元素具有上课。

您可以在选择器中使用:visible伪类，以便只测试未隐藏的元素。

var $required = $("input[required]:visible").css('border', '1px solid #CCC');

或者您可以使用未隐藏父母的搜索来查找所需的输入。

var $required = $("li:not(.hide) input[required]").css('border', '1px solid #CCC');

或者您可以检查过滤器功能：

$invalid = $required.filter(function() {
    return !this.value && !$(this).closest("li").hasClass("hide");
});

搜索元素是否没有类

1 个答案: