使用带有 Bootstrap 4.0.0 beta 的 jquery 验证 1.17.0答案

【问题标题】：Using jquery validation 1.17.0 with Bootstrap 4.0.0 beta使用带有 Bootstrap 4.0.0 beta 的 jquery 验证 1.17.0
【发布时间】：2017-09-19 10:32:18
【问题描述】：

我正在做一个项目，发现 bootstrap 4.0.0 beta 不再使用 glyphicons，那么我怎样才能达到与第二个示例“使用反馈图标”中显示的相同的效果这里的链接JQuery-validation and Bootstrap 使用 font-awesome 4.7.0？为了更清楚，我在下面包含了验证的输出：

目前这是我所拥有的：

HTML

<div class="form-group">
    <label class="col-sm-4 control-label df-label" for="first_name">*&nbsp;First&nbsp;name:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" />
    </div>
</div>

<div class="form-group">
    <label class="col-sm-5 control-label df-label" for="last_name">*&nbsp;Last&nbsp;name:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" />
    </div>
</div>

....

<div class="form-group">
    <div class="col-sm-12">
        <button type="submit" class="btn btn-outline-success my-2 my-sm-0" id="send" name="send" value="Send">Send</button>
    </div>
</div>

CSS

.has-danger .control-label,
.has-danger .help-block,
.has-danger .form-control-feedback {
    color: #d9534f;
}

jQuery

$( "#contact-form" ).validate({
    rules: {
        first_name: "required"
        ,last_name: "required"
        ,email: {
            required: true
            ,email: true
        }
        ,message: {
            required: true
            ,minlength: 10
        }
    }
    ,messages: {
        first_name: "Please enter your First name"
        ,last_name: "Please enter your Last name"
        ,email: "Please enter a valid Email address"
        ,message: {
            required: "Please enter a Message"
            ,minlength: "Your message must consist of at least 10 characters"
        }
    }
    ,meta: "validate"
    ,errorElement: "em",

    errorPlacement: function ( error, element ) {
        // Add the `help-block` class to the error element
        error.addClass( "help-block" );

        // Add `has-feedback` class to the parent div.form-group
        // in order to add icons to inputs
        element.parents( ".col-sm-5" ).addClass( "has-feedback" );
        element.parents( ".col-sm-8" ).addClass( "has-feedback" );

        if ( element.prop( "type" ) === "checkbox" ) {
            error.insertAfter( element.parent( "label" ) );
        } else {
            error.insertAfter( element );
        }

        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if ( !element.next( "span" )[ 0 ] ) {
            $( "<span class='fa fa-times form-control-feedback'></span>" ).insertAfter( element );
        }
    },
    success: function ( label, element ) {
        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if ( !$( element ).next( "span" )[ 0 ] ) {
            $( "<span class='fa fa-check form-control-feedback'></span>" ).insertAfter( $( element ) );
        }
    },
    highlight: function ( element, errorClass, validClass ) {
        $( element ).parents( ".col-sm-5" ).addClass( "has-danger" ).removeClass( "has-success" );
        $( element ).parents( ".col-sm-8" ).addClass( "has-danger" ).removeClass( "has-success" );
        $( element ).next( "span" ).addClass( "fa-times" ).removeClass( "fa-check" );
    },
    unhighlight: function ( element, errorClass, validClass ) {
        $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-danger" );
        $( element ).parents( ".col-sm-8" ).addClass( "has-success" ).removeClass( "has-danger" );
        $( element ).next( "span" ).addClass( "fa-check" ).removeClass( "fa-times" );
    }
});

这是我目前的输出：

【问题讨论】：

标签： jquery-validate font-awesome bootstrap-4 twitter-bootstrap-4 fontawesome-4.4.0

【解决方案1】：

我猜您的问题首先是反馈图标的位置，其次是元素的颜色？ bootstrap 的 alpha 和 beta 版本（以及 bootstrap 3）之间有一些很大的变化，尤其是。关于表单验证。

首先，要正确放置图标，您需要添加与 bootstrap 3 中的样式相同的样式，而不是 bootstrap 4 beta 中的样式...这就是我正在使用的

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

随着测试版使用您发布的代码未反映的控件的“状态”，类已更改，因此您的上述代码可能无法正常工作。无论如何，您需要在成功或突出显示/取消突出显示回调中将“已验证”类添加到表单中

$(element).closest('form').addClass('was-validated');

我还建议对表单控件帮助文本使用新元素和类

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

【讨论】：

Howzit @user2030404 非常感谢您的回答，我还没有尝试过，但您的猜测是正确的，所以我非常有信心您的解决方案会奏效。稍后我会给它一个bash，让你知道结果是什么。再次感谢并保持良好状态。

【解决方案2】：

我假设您不想购买 Glyphicons，因此您可以切换到 Font Awesome。查看您提供的示例的源代码，了解如何使用“glyphicon-ok”和“glyphicon-remove”。等效的“fa-check”和“fa-times”图标看起来最接近。