Question

我正在开发一个项目，并注意到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" );
    }
});

到目前为止，这是我的输出：

Answer 1

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

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

2 个答案: