使用 jquery 验证 1.17.0 和 Bootstrap 4.0.0 beta

Question

我正在做一个项目并注意到 bootstrap 4.0.0 beta 不再使用字形图标，所以我怎样才能达到与第二个示例相同的效果“使用反馈图标”显示在 link 这里 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" );
    }
});

这是我目前的输出：

Answer 1

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

相关问题：

Answer 2

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

首先，要正确放置图标，您需要添加等同于 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;
}

classes 已经改变，因为测试版使用了您发布的代码未反映的控件的 'state'，因此您的上述代码可能无法正常工作。无论如何，您需要在成功或 highlight/unhighlight 回调

中向表单添加 'was-validated' class

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

我还建议使用新元素和 classes 作为表单控件帮助文本

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

使用 jquery 验证 1.17.0 和 Bootstrap 4.0.0 beta

Using jquery validation 1.17.0 with Bootstrap 4.0.0 beta

jquery-validate

font-awesome

bootstrap-4

twitter-bootstrap-4

fontawesome-4.4.0