Bootstrap Validator

Asked

Viewed 2,797 times

0

Personal,

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

Missing part of turning 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>

<!-- Latest compiled JavaScript -->
<script src="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>

<!-- Latest compiled JavaScript -->
<script src="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>

bootstrap bootstrap-validator

  • It would be good to put the bootstrap-Validator Cdn link to run your code and see exactly where the error is

  • Okay, I’ve arranged to run the code

1 answer

1


To do what you asked I made several modifications, both in HTML and script. Below 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>
<!-- bootstrap CSS -->
<link rel="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>
<!-- bootstrap font-awesome -->
<link href="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>

<form action="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>

  • Wonderful, it worked well, but the label that was using to write Ubur, now not....

  • I don’t understand the problem. Can you explain better?

  • They answered me here!!! https://answall.com/questions/271000/label-no-bootstrap Thank you for your help

Browser other questions tagged bootstrap bootstrap-validator

You are not signed in. Login or sign up in order to post.