Diseñando un formulario de registro en Bootstrap con validación de campos jQuery

En este tutorial te voy a mostrar cómo crear un formulario de registro simple y totalmente responsive utilizando Bootstrap. Bootstrap es un framework web CSS/JS frontend, desarrollado por el equipo de Twitter, y me encanta utilizarlo en mis proyectos personales ya que te ofrece múltiples ventajas a la hora de llevar a cabo un frontend responsive, ahorrándote muchísimas horas de trabajo.

Ya que tenemos todo claro, voy a enseñarte cómo crear un formulario de registro simple y totalmente responsive cuyos campos van a ser comprobados con un script de validación de jQuery. ¡Vamos a por el código!

Iniciando Bootstrap

Para este caso, usaremos la última versión lanzada de Bootstrap, es decir, la versión 3.3.7, la cual puedes descargar desde su web oficial. Una vez descargados los ficheros, coloca estas lineas en tu plantilla dentro del tag head para incluir la librería:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Form with jQuery Validations</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
</head>

Creación del formulario

Este será el diseño (con Bootstrap) de nuestro formulario:

<body>

    <div class="container">

    <div class="signup-form-container">
    
         <!-- form start -->
         <form role="form" id="register-form" autocomplete="off">
         
         <div class="form-header">
         <!-- form header -->       
         </div>
         
         <div class="form-body">
                          
          <!-- form body will be here, input controls -->              
              
         </div>
            
         <div class="form-footer">
            <!-- form footer, let say for submit button -->
         </div>

         </form>
            
    </div>

    </div>

</body>

Ahora vamos a ver cómo añadir glyphicons en nuestros campos para que luzcan más profesionales. Todos los inputs los colocaremos dentro del div form-group. Para añadir un glyphicon dentro de un input, crea otro div con la clase input-group, y justo debajo de dicho input-group añade otro dv con la clase input-group-addon. Ya solo queda añadir el glyphicon dentro del input-group-addon tal que así:

<div class="form-group">
     <div class="input-group">
     <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
     <input name="name" type="text" class="form-control" placeholder="Username">
     </div>
     <span class="help-block" id="error"></span>
</div>

Vamos a crear todos los inputs necesarios para el formulario de registro. Aquí tienes el código HTML para crear el formulario de registro con Bootstrap.

<body>

 <div class="container">

    <div class="signup-form-container">
    
         <!-- form start -->
         <form role="form" id="register-form" autocomplete="off">
         
         <div class="form-header">
          <h3 class="form-title"><i class="fa fa-user"></i> Sign Up</h3>
                      
         <div class="pull-right">
             <h3 class="form-title"><span class="glyphicon glyphicon-pencil"></span></h3>
         </div>
                      
         </div>
         
         <div class="form-body">
                      
            <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                   <input name="name" type="text" class="form-control" placeholder="Username">
                   </div>
                   <span class="help-block" id="error"></span>
              </div>
                        
              <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                   <input name="email" type="text" class="form-control" placeholder="Email">
                   </div> 
                   <span class="help-block" id="error"></span>                     
              </div>
                        
              <div class="row">
                        
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="cpassword" type="password" class="form-control" placeholder="Retype Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
             </div>
                        
                        
            </div>
            
            <div class="form-footer">
                 <button type="submit" class="btn btn-info">
                 <span class="glyphicon glyphicon-log-in"></span> Sign Me Up !
                 </button>
            </div>


            </form>
            
           </div>

 </div>
    

</body>

Validación de campos

Una vez creado el formulario, ahora nos queda validar los campos con jQuery. Para ello necesitamos el plugin de jQuery jquery.validate.min.js, el cual puedes obtenerlo desde la web oficial, y también, lógicamente, la popular librería jQuery, que sin ella, el plugin de antes no valdría para nada. Por lo tanto, tenemos que agregar dos ficheros Javascript para que todo funcione correctamente. Añade los dos ficheros en la maqueta antes del cierre del tag body.

<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="assets/jquery-1.11.2.min.js"></script>
<script src="assets/jquery.validate.min.js"></script>
<!-- javascript/jquery validations will be here  -->

</body>
</html>

Crea un nuevo fichero llamado register.js y copia/pega el siguiente código dentro de él. He añadido la validación de todos los campos en el código.

$('document').ready(function()
{    
   // name validation
    var nameregex = /^[a-zA-Z ]+$/;
   
   $.validator.addMethod("validname", function( value, element ) {
       return this.optional( element ) || nameregex.test( value );
   }); 
   
   // valid email pattern
   var eregex = /^([a-zA-Z0-9_.-+])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
   
   $.validator.addMethod("validemail", function( value, element ) {
       return this.optional( element ) || eregex.test( value );
   });
   
   $("#register-form").validate({
     
    rules:
    {
    name: {
     required: true,
     validname: true,
     minlength: 4
    },
    email: {
     required: true,
     validemail: true
    },
    password: {
     required: true,
     minlength: 8,
     maxlength: 15
    },
    cpassword: {
     required: true,
     equalTo: '#password'
    },
     },
     messages:
     {
    name: {
     required: "Please Enter User Name",
     validname: "Name must contain only alphabets and space",
     minlength: "Your Name is Too Short"
       },
       email: {
       required: "Please Enter Email Address",
       validemail: "Enter Valid Email Address"
        },
    password:{
     required: "Please Enter Password",
     minlength: "Password at least have 8 characters"
     },
    cpassword:{
     required: "Please Retype your Password",
     equalTo: "Password Did not Match !"
     }
     },
     errorPlacement : function(error, element) {
     $(element).closest('.form-group').find('.help-block').html(error.html());
     },
     highlight : function(element) {
     $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
     },
     unhighlight: function(element, errorClass, validClass) {
     $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
     $(element).closest('.form-group').find('.help-block').html('');
     },
     
     submitHandler: function(form) {
                    form.submit();
     alert('ok');
                }
     }); 
 })

Cómo añadir un método de validación personalizado en jQuery Validation

var nameregex = /^[a-zA-Z ]+$/;

$.validator.addMethod("validname", function( value, element ) {
     return this.optional( element ) || nameregex.test( value );
}); 
   
// valid email pattern
var eregex = /^([a-zA-Z0-9_.-+])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
   
$.validator.addMethod("validemail", function( value, element ) {
     return this.optional( element ) || eregex.test( value );
});

Si el usuario completa el campo erróneamente, llamamos al método de validación personalizado.

name: {
      required: true,
      validname: true // rule for accepts only alphabets with space
      },
email: {
      required: true,
      validemail: true // rule for accepts valid email pattern
      }

// messages : user defined messages for the custom rules.

name: {
      required: "Please Enter User Name",
      validname: "Name must contain only alphabets and space"
      },
email: {
      required: "Please Enter Email Address",
      validemail: "Enter Valid Email Address"
      }

Fuente: codingcage.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP