Question

我正在处理我的表单的错误消息，我试图弄清楚如何使用一个函数显示错误。不幸的是，错误消息元素与字段的关系在整个表单中都有所不同。在某些情况下，它将是：

<div class="col-sm-6">
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />
    <div class="error">Please enter your first name.</div>
</div>

在这种情况下，我可以使用$(this).next.show();来显示错误消息。

但是，在其他情况下，我的字段结构如下：

<div id="variants">
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="red">Red</label><br/>
        <label><input type="radio" name="variant" value="green">Green</label><br/>
        <label><input type="radio" name="variant" value="blue">Blue</label>
    </div>
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="yellow">Yellow</label><br/>
        <label><input type="radio" name="variant" value="brown">Brown</label><br/>
        <label><input type="radio" name="variant" value="orange">Orange</label>
    </div>
    <div class="error">Please select a product variant.</div>
</div>

在这个例子中，上面的jQuery选择器不起作用，因为.error元素是输入父节点的兄弟，而不是输入的直接兄弟节点。

我的问题是，有没有办法选择元素的下一个最接近的实例，而不管它与被比较的元素的关系如何？我正在调查.closest()，但未能让它发挥作用。

谢谢！

Answer 1

您需要在层次结构的每个级别上进行有效搜索。

$(this).parents().has('.error').first().find('.error');

这将检查每个父级，然后查看何时有错误类，返回最接近的，然后找到后代错误。

您也可以使用以下内容：

$(this).closest(':has(.error)').find('.error');

这是一个JSFiddle，显示两个工作（停止所有的抱怨）：http://jsfiddle.net/u37twowx/1/：）

您会注意到此解决方案不需要在层次结构中添加类。

Answer 2

为每个输入元素容器div使用公共类，并使用closest()和find()定位错误div。

例如：

<div class="col-sm-6 element">
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />
    <div class="error">Please enter your first name.</div>
</div>

<div id="variants" class="element">
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="red">Red</label><br/>
        <label><input type="radio" name="variant" value="green">Green</label><br/>
        <label><input type="radio" name="variant" value="blue">Blue</label>
    </div>
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="yellow">Yellow</label><br/>
        <label><input type="radio" name="variant" value="brown">Brown</label><br/>
        <label><input type="radio" name="variant" value="orange">Orange</label>
    </div>
    <div class="error">Please select a product variant.</div>
</div>

现在使用jquery：

$(this).closest(".element").find(".error").show();

Answer 3

我曾经一直使用的东西是使用:after伪类，然后将该类添加到接收错误的元素。

有多种方法可以实现，特别是如果您需要自定义消息。

<强> HTML

<input type="text" id="first_name" name="first_name" />

<强> CSS

input.error:after, input.error::after {
    content: '';
    position: relative;
    bottom: 0;
    height: 20px;
    background: red;
    color: white;
}

#first_name.error:after, #first_name.error:after {
    content: 'Please input first name.';
}

#last_name.error:after, #last_name.error:after {
    content: 'Please input last name.';
}
.
.
.

<强>的jQuery

$('input').keypress(function(){
    if(/*Conditional*/){
        $(this).addClass('error');
    }
});

这是一个简单的jQuery函数，您只需将其设置为相应地处理错误。

使用jQuery查找元素的下一个实例，无论关系如何？

3 个答案: