Pessoal,
Nao estou conseguindo colocar a validação do Bootstrap por completo… o Basico ja funciona, mas o restante nao…
Falta a parte de ficar verde com icone no lado direito de SUCESS ou ERROR
<script> $ ('#se-form').bootstrapValidator({ message: 'No es valido', icon: { required: 'fa fa-asterisk', valid: 'fa fa-check', invalid: 'fa fa-times', validating: 'fa fa-refresh' } fields: { first_name: { validators: { notEmpty: { message: 'El nombre no puede estar vacío' } } } } }); </script>
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link href="../favicon.ico" rel="shortcut icon"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script type="javascript" src="js/modernizr.custom.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="javascript" src="js/bootstrap.min.js"></script> <!-- Select Bootstrap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script> <!-- Validator Bootstrap --> <script type="text/javascript" src="js/validator.js"></script> <script type="text/javascript" src="js/validator.min.js"></script> <script type="text/javascript"> $ (document).ready(function() { $ ('#myModal').modal('show'); }); </script> </head> <body> <form action="index.php?page=equipInsert" method="post" id="se-form" data-toggle="validator"> <div class="container-fluid"> <div class="row"> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-user se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <input name="first_name" id="first_name" type="text" placeholder="Primer Nombre" class="form-control" required> <label for="first_name">Primer Nombre</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-user se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <input name="last_name" id="last_name" type="text" data-minlength="3" data-error="Minimo de 3 caracteres." placeholder="Apelido" class="form-control" required> <label for="last_name">Apelido</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-envelope-o se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <input name="email" id="email" type="email" data-minlength="4" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$ " data-error="Informe um e-mail correto." placeholder="Email" class="form-control" required> <label for="email">Email</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-key se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <input name="password" id="password" type="password" data-minlength="6" data-error="Minimo de 6 caracteres." placeholder="Contraseña" class="form-control" required> <label for="password">Contraseña</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-key se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <input name="password_reply" id="password_reply" type="password" data-minlength="6" data-match="#password" data-match-error="Atenção! As senhas não estão iguais." placeholder="Contraseña Repetir" class="form-control" required> <label for="first_name">Contraseña Repetir</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-venus-mars se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <select name="gender" id="gender" class="form-control" required> <option value="" disabled selected>Seleccione su opción</option> <option value="1">Masculino</option> <option value="2">Femenino</option> </select> <label for="gender">Gender</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-birthday-cake se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <input name="birth_date" id="birth_date" type="date" class="form-control" required> <label for="birth_date">Fecha de aniversário</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-phone se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <input name="telephone" id="telephone" type="tel" min="13" data-minlength="13" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$ " data-error="13 caracteres." placeholder="Teléfono" class="form-control" required> <label for="telephone">Teléfono</label> <div class="help-block with-errors se-text-p"></div> </div> </div> <div class="col-xs-2 col-sm-1 col-md-1 se-center"> <i class="fa fa-users se-icon-m" aria-hidden="true"></i> </div> <div class="col-xs-10 col-sm-11 col-md-11"> <div class="form-group"> <select name="nivel" id="nivel" class="form-control" required> <option value="" disabled selected>Seleccione su opción</option> <option value="1">Admin</option> <option value="2">Usuario</option> </select> <label for="nivel">Nivel</label> <div class="help-block with-errors se-text-p"></div> </div> </div> </div> <p align="center"> <button type="reset" title="Resetar..." class="btn btn-warning" /> Resetar <i class="fa fa-eraser se-icon-p"></i></button> <button type="submit" name="insertEquip" title="Agregar..." class="btn btn-primary" />Agregar <i class="fa fa-save se-icon-p"></i></button> </p> </form> <br> <p align="center"> <a href="index.php?page=equipList"> <i class="fa fa-arrow-circle-left se-icon-m"></i> Regressar </a> </p> </body> </html>