Formulario html y css con validaciones de jquery

Author: Santiago vasquez olarte
formulario y validación con jquery



A continuación, les presento una simple y sencillo formulario que nos va a ayudar a validar nuestros formularios y lo más importante de todo es guardar bien la información en nuestra base de datos. En este simple ejemplo estoy validando los campos como: nombre, correo electrónico, nombre de usuario y contraseña.
validaciones, porque con JavaScript lleva demasiado tiempo creando las funciones de forma manual ya que así toca crear cada regla, y muchas veces se torna muy tediosa o muy larga de hacer, esto es una tarea tan necesaria para cada sitio web. Sin embargo, Jquery a través de su librería validate.js lo hace demasiado fácil. En primer lugar, para este ejemplo usaré la versión de Jquery 1.11
Entonces les presento los archivos que debes invocar al inicio de tu archivo o página a trabajar:


<script src="assets/js/jquery.1.11.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> <link href="bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">


Formulario HTML: index.html
Este es el formulario HTML donde está toda la estructura del formulario y los más importante es donde la librería de Jquery 1.11 se comunica con este formulario a través de los atributos id, si te fijas bien en el formulario ahí unos atributos donde se están nombrando los inputs y formulario.

<div class="container bootstrap snippet"> <div class="row"><br> <div style="display:none" class="alert alert-success alert-success" role="alert">Formulario enviado correctamente</div> <div class="col-md-4 col-md-offset-7"> <div class="panel panel-default"> <div class="panel-heading"> <strong class="">Iniciar sesión</strong> </div> <div class="panel-body"> <form class="form-horizontal" role="form" id="idFormulario"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">Nombre</label> <div class="col-sm-9"> <input type="text" name="nombre" class="form-control" id="inputNombre" placeholder="ingrese nombre completo"> </div> </div> <div class="form-group"> <label for="inputCorreo" class="col-sm-3 control-label">Correo electrónico</label> <div class="col-sm-9"> <input type="email" name="correo" class="form-control" id="inputCorreo" placeholder="ingrese su correo" required=""> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">Usuario</label> <div class="col-sm-9"> <input class="form-control" name="usuario" id="inputUsuario" placeholder="username" required=""> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">Contraseña</label> <div class="col-sm-9"> <input type="password" name="contrasena" class="form-control" id="inputContraseña" placeholder="ingrese una contraseña" required=""> </div> </div> <div class="form-group last"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-success btn-sm">Entrar</button> <button type="reset" class="btn btn-default btn-sm">Restablecer</button> </div> </div> </form> </div> <div class="panel-footer">Tener una cuenta? <a href="index.html" class="">Entre aquí</a> </div> </div> </div> </div> </div>


archivo de estilos CSS : index.css
Dado a continuación nuestro código CSS completo para que nuestro formulario sea más bonito y atractivo al momento del usuario llenarlo
- Lo que hacen estos estilos es seleccionar el borde de color rojo cuando no se cumple la regla de validación.

input.error, input select.error { border: 1px solid red; } label.error{ color:red; }


jQuery File: formValidation.js
A continuación, nuestro código jQuery completo.
- En la hoja de javascript cargaremos nuestras reglas de validación. Las reglas funcionan de la siguiente manera, cada regla va asociada a un input del formulario y a su vez a un mensaje a mostrar en caso de error de validación.

var rules = { nombre: {required:true,minlength: 3}, usuario: {required:true,minlength: 3}, contrasena: {required:true,minlength: 6}, correo:{required: true, email:true}, }; let mensajes = { nombre: {required:"Nombre Requerido"}, usuario: {required:"Usuario Requerido"}, contrasena:{required:"Contraseña Requerida", minlength:"Caracteres minimos 6"}, correo:{required:"Correo electrónico Requerido", email:"Formato de Correo electrónico incorrecto"}, }; $(document).ready (function(){ $("#idFormulario").submit(function(e) { e.preventDefault(); }).validate({ rules:rules, messages:mensajes, submitHandler: function(form) { $('.alert-success').show(1000); return false; } }); });

Les mostrare estas otras reglas para validar un formulario:

  • maxlength: comprobará que el número de caracteres es menor al especificado

  • minlength: comprobará que el número de caracteres es mayor al especificado

  • rangelength: comprobará que el número de caracteres introducidos se encuentra entre el rango especificado, por ejemplo rangelength:[50,250]

  • min: se aplica a campos numéricos, comprueba que como mínimo se introduzca un valor igual al especificado

  • max: se aplica a campos numéricos, comprueba que como mucho se introduzca un valor igual al especificado

  • equalTo: se usa para comprobar que el valor de dos campos sea el mismo, por ejemplo la confirmación de una contraseña o correo. Su uso sería de la siguiente forma: confirm_email:{equalTo:”#email”}

  • url: comprobará que el valor introducido tiene formato de URL

  • email: comprobará que el valor introducido tiene formato de e-mail


Espero que les haya gustado esta pequeña explicación de como validar un formulario