Bootstrap Validator

Navigation
0

Personal,

I am not able to put the Bootstrap validation completely ... Basico already works, but the rest does not ...

Missing part of green with icon on right side of SUCESS or 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>
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--LatestcompiledJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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"> 


 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--LatestcompiledJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></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> &nbsp;&nbsp; 
  <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>
    
asked by anonymous 20.01.2018 / 01:41

1 answer

1

To do what you asked for, I made several modifications, both in the HTML and in the script. Here is the updated code. 

$(document).ready(function() {
  $('#se-form').bootstrapValidator({
    message: 'No es valido',
    framework: 'bootstrap',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      first_name: {
        validators: {
          notEmpty: {
            message: 'El nombre no puede estar vacío'
          }
        }
      }
    }
  }); // bootstrapValidator
}); // document.ready
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--bootstrapCSS--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrapfont-awesome--><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!-- bootstrap Validator css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" rel="stylesheet" />
<!-- bootstrap Validator JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script><formaction="index.php?page=equipInsert" method="post" id="se-form" data-toggle="validator">

  <div class="form-group">
    <label for="first_name">Primer Nombre</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user se-icon-m"></i></span>
      <input name="first_name" id="first_name" type="text" placeholder="Primer Nombre" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="last_name">Apelido</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user se-icon-m"></i></span>
      <input name="last_name" id="last_name" type="text" data-minlength="3" data-error="Minimo de 3 caracteres." placeholder="Apelido" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-envelope-o se-icon-m"></i></span>
      <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>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="password">Contraseña</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key se-icon-m"></i></span>
      <input name="password" id="password" type="password" data-minlength="6" data-error="Minimo de 6 caracteres." placeholder="Contraseña" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="password_reply">Contraseña Repetir</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key se-icon-m"></i></span>
      <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>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="gender">Gender</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-venus-mars se-icon-m"></i></span>
      <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>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="birth_date">Fecha de aniversário</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-birthday-cake se-icon-m"></i></span>
      <input name="birth_date" id="birth_date" type="date" class="form-control" required>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="telephone">Teléfono</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-phone se-icon-m"></i></span>
      <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>
      <div class="help-block with-errors se-text-p"></div>
    </div>
  </div>

  <div class="form-group">
    <label for="nivel">Nivel</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-users se-icon-m"></i></span>
      <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>
      <div class="help-block with-errors se-text-p"></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> &nbsp;&nbsp;
    <button type="submit" name="insertEquip" title="Agregar..." class="btn btn-primary" />Agregar
    <i class="fa fa-save se-icon-p"></i></button>
  </p>
</form>
    
21.01.2018 / 13:56
Modules in Rust Create a Table-Relationship (N: N) that relates to a Table-Normal and another Table-Relationship (N: N) in SQL Server 2014 Management Studio