0

Buen día Mi problema es el siguiente Al momento de validar un campo con bootstrapValidator solo me muestra el texto en negro :

al momento de mandar el input vacío me muestra el mensaje y eso esta correcto

lo que quiero es que muestre algo asi:

Se que el problema podria ser el css pero ya puse el cdn css de bootstrap Validator:

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>

Este es mi codigo html:

                                                            <div class="col-md-6">
                                                            <div class="form-group">
                                                                <h7>Modelo</h7>
                                                                <input type="text" id="Modelo" name="Modelo" class="form-control" placeholder="Modelo" autocomplete="off" />
                                                            </div>
                                                        </div>

y Este es mi codigo JS:

  $('.RegisterForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        Modelo: {
            message: 'The username is not valid',
            validators: {
                notEmpty: {
                      message:'The username is required and cannot be empty'
                }
            }

        }
    },

});

Espero que me puedan ayudar ,Gracias de Antemano Saludos

Actualización

Estos los links de css que utilizo:

    <meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Include FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/>
<!---Css-->
<script type="text/javascript" src="<%=ResolveUrl("~/AdminLTE/Bower_Components/jquery/dist/jquery.min.js")%>"></script>
<!--Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback" />
<!--Font Awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!--Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<!--Tempusdominus Bootstrap 4 -->

<!--iCheck -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.css" />
<!--JQVMap -->
<!--Theme style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.1.0/css/adminlte.min.css" />
<!--overlayScrollbars -->
<!--Daterange picker -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" integrity="sha512-CbQfNVBSMAYmnzP3IC+mZZmYMP2HUnVkV4+PwuhpiMUmITtSpS7Prr3fNncV1RBOnWxzz4pYQ5EAGG4ck46Oig==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--datatables-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css" />

<link href="AdminLTE/Bower_Components/icheck-1.0.3/skins/flat/red.css" rel="stylesheet" />
<link href="AdminLTE/Bower_Components/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="AdminLTE/Bower_Components/filepond-master/filepond-master/dist/filepond.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.1/css/OverlayScrollbars.min.css" integrity="sha512-jN4O0AUkRmE6Jwc8la2I5iBmS+tCDcfUd1eq8nrZIBnDKTmCp5YxxNN1/aetnAH32qT+dDbk1aGhhoaw5cJNlw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

1 respuesta 1

0

Lamentablemente BootstrapValidator No es compatible con bootstrap 4 en su lugar opte por utilizar jqueryValidator

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.