jQuery 如果输入有错误 class 添加 class 到字段集

Question

如果字段集的输入有“错误”class，我如何将“错误”class 添加到字段集？

我正在尝试按以下方式实现此目的，但无论输入是否具有“错误”class，它都会向每个字段集添加“错误”class。

$('#submit').click(function(e) {
    e.preventDefault();
    $('input').each(function() {
        if($(this).hasClass("error")){
            $("fieldset").addClass("error");
        }
    });
});

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-holder">
    <fieldset>
        <legend>First name</legend>
        <input type="text" class="form-control" name="firstname" placeholder="First name" required>
    </fieldset>
</div>

<div class="form-holder">
    <fieldset>
        <legend>Last name</legend>
        <input type="text" class="form-control error" name="lastname" placeholder="Last name" required>
    </fieldset>
</div>

<div class="form-holder">
    <fieldset>
        <legend>Email</legend>
        <input type="email" class="form-control error" name="email" placeholder="Email" required>
    </fieldset>
</div>

<input type="submit" id="submit" value="Send">

Answer 1

代码正在按照您的指示执行。当您说 $("fieldset").addClass("error"); 时，它意味着将错误 [=19=] 添加到所有字段集元素。

您需要做的是找到错误 class 输入的父字段集。在您的示例中，这将是：

$('#submit').click(function(e) {
    e.preventDefault();
    $('input').each(function() {
        if($(this).hasClass("error")){
            $(this).closest("fieldset").addClass("error");
        }
    });
});

closest() 方法将向上移动 DOM 寻找与选择器匹配的第一个元素。所以它应该找到最接近输入的父字段集。

Answer 2

尝试使用 parent 选择器明确定位父 fieldset。（并且还缓存 jQuery 的 this 变量。）

$('#submit').click(function(e) {
    e.preventDefault();

    $('input').each(function() {
        var $this = $(this);
        if ($this.hasClass("error")) {
            $this.parent("fieldset").addClass("error");
        }
    });
});

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="form-holder">
    <fieldset>
        <legend>First name</legend>
        <input type="text" class="form-control" name="firstname" placeholder="First name" required>
    </fieldset>
</div>

<div class="form-holder">
    <fieldset>
        <legend>Last name</legend>
        <input type="text" class="form-control error" name="lastname" placeholder="Last name" required>
    </fieldset>
</div>

<div class="form-holder">
    <fieldset>
        <legend>Email</legend>
        <input type="email" class="form-control error" name="email" placeholder="Email" required>
    </fieldset>
</div>

<input type="submit" id="submit" value="Send">

jQuery 如果输入有错误 class 添加 class 到字段集

jQuery add class to fieldset if input is have error class

html

javascript

jquery