如何从Jquery验证器错误消息中删除框影？

Question

我有以下表格：

<form id="form-email" class="ps-4 contact-form" autocomplete="off">
        <div class="row">
            <div class="form-group col-md-6">
                <input class="form-control contact-input" name="fname" type="text" placeholder="Name"/>
                <label class="col-form-label" for="fname"></label>
            </div>
            <div class="form-group col-md-6">
                <input class="form-control contact-input" name="femail" type="email" placeholder="Your e-mail"/>
                <label class="col-form-label" for="femail"></label>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-12">
                <input class="form-control contact-input" name="fsubject" placeholder="Subject" type="text"/>
                <label class="col-form-label" for="fsubject"></label>
            </div>
            <div class="form-group col-md-12">
                <textarea class="form-control contact-input" name="fmessage" placeholder="Message" maxlength="500" style="height:150px;"></textarea>
                <label class="col-form-label" for="fmessage"></label>
            </div>
        </div>
        <div>
            <button class="btn btn-lg btn-outline-warning contact-input-button" type="submit" style="float:right;">
                Send e-mail
            </button>
        </div>
    </form>

Jquery验证器：

$(function(){
        $("#form-email").validate({
            errorClass:"invalid-input",
            rules:{
                fname:"required",
                femail:"required",
                fsubject:"required",
                fmessage:"required"
            },
            submitHandler: function() { alert("Success, your e-mail has been submited!") }
        });    
    });

CSS errorClass：

.invalid-input {
    box-shadow: 0 3px 0 0 rgb(255 0 0) !important;
    color: red;
}

这一页：

​

​

如何将红色框阴影保留在输入框中但从标签中删除？Jquery正在将errorClass添加到输入和标签元素中。

有办法处理2 errorClasses吗？一个用于输入，另一个用于标签？

Answer 1

只要使用input.invalid-input, textarea.invalid-input选择器，如果您只想要目标inputs和textarea。

​

$(function(){
        $("#form-email").validate({
            errorClass:"invalid-input",
            rules:{
                fname:"required",
                femail:"required",
                fsubject:"required",
                fmessage:"required"
            },
            submitHandler: function() { alert("Success, your e-mail has been submited!") }
        });    
    });

input {
  margin-bottom: 5px;
}

input.invalid-input, textarea.invalid-input {
    box-shadow: 0 3px 0 0 rgb(255 0 0) !important;
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<form id="form-email" class="ps-4 contact-form" autocomplete="off">
        <div class="row">
            <div class="form-group col-md-6">
                <input class="form-control contact-input" name="fname" type="text" placeholder="Name"/>
                <label class="col-form-label" for="fname"></label>
            </div>
            <div class="form-group col-md-6">
                <input class="form-control contact-input" name="femail" type="email" placeholder="Your e-mail"/>
                <label class="col-form-label" for="femail"></label>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-12">
                <input class="form-control contact-input" name="fsubject" placeholder="Subject" type="text"/>
                <label class="col-form-label" for="fsubject"></label>
            </div>
            <div class="form-group col-md-12">
                <textarea class="form-control contact-input" name="fmessage" placeholder="Message" maxlength="500" style="height:150px;"></textarea>
                <label class="col-form-label" for="fmessage"></label>
            </div>
        </div>
        <div>
            <button class="btn btn-lg btn-outline-warning contact-input-button" type="submit" style="float:right;">
                Send e-mail
            </button>
        </div>
    </form>

​