Validación de un formulario con Parsley.js

En este tutorial veremos cómo validar un formulario de registro utilizando la librería Parsley.js. Parsley es una de las librerías más avanzadas en cuanto a validación de formularios con JavaScript se refiere. En anteriores tutoriales hemos visto ya como validar un simple formulario HTML utilizando plugins de jQuery, así como múltiples maneras de validar formularios web del lado del servidor o del lado del cliente escribiendo código en PHP, ASP y Javascript, amen de cientos de librerías de jQuery como esta que te presentamos hoy. Parsley es ampliamente utilizado en muchos themes admin que he visto por la red, así que vamos a echarle un vistazo.

Parsley.js

En primer lugar, voy a explicarte qué es Parsley, Es una librería de validación impresionante que contiene todos los tipos de validación que, por lo general, sueles necesitar, además de ser muy ligera. Para la validación utiliza una API DOM específica por atributos data-attributes, así que no tienes que escribir ni una sola línea de código JavaScript. En resumen podemos decir que se trata de una librería muy ligera y rica en funciones.

La DOM API por defecto de Parsley es data-parsley-, y sólo tienes que utilizar sus propiedad, propiedades que validan correos electrónicos, números, fechas, dígitos, etc. Supongamos que desea validar un input de correo electrónico. Sólo tienes que añadir la propiedad data-parsley-type=”email” en el mismo elemento input, y ya está.

Poniéndola en práctica

Ahora vamos a ver cómo poner en práctica esta avanzada librería para la validación de formularios en tus proyectos webs, por lo que descárgate todos los ficheros de Parsley desde su web oficial. O si sueles utilizar una versión anterior, no olvides actualizarla hasta la última versión.

Después de descargar los ficheros, solo tienes que añadirlos en el documento en el que quieras validar formularios. Pero recuerda una cosa, debes añadir la librería jQuery antes de incluir la de Parsley tal que así:

<script src="jquery-1.12.4-jquery.min.js"></script>
<script src="parsley.min.js"></script>

Existen dos maneras de utilizar la librería Parsley. Una es añadiendo el atributo data-parsley-validate en el tag form, y la otra es añadiendo una pequeña línea de Javascript. No te preocupes si no lo has entendido del todo. A continuación puedes ver los dos ejemplos:

1º método – Básico

<form data-parsley-validate>
<!-- form input goes here -->
</form>

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

2º método – Javascript

<form id="regform">
<!-- form input goes here -->
</form>


<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<script type="text/javascript">
  $('#regform').parsley();
</script>

Como dije, para realizar las distintas validaciones utiliza atributos, por lo que tienes que añadir data-attributes de parsley en cualquier campo que quieras validar, y Parsely se ocupará de todo lo demás.

Ahora vamos a coger como ejemplo un formulario de registro. Cabe decir que he utilizado bootstrap para componer el diseño.

<form method="post" class="form-horizontal">
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Alphabets</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" placeholder="Type something" />
 </div>
 </div>
            
           
 <div class="form-group">
 <label class="col-sm-3 control-label">Equal To</label>
 <div class="col-sm-3">
 <input type="password" id="pass2" class="form-control" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" placeholder="Password" />   
        </div>
 <div class="col-sm-3">
 <input type="password" class="form-control" required data-parsley-equalto="#pass2" data-parsley-trigger="keyup" placeholder="Re-Type Password" />    
        </div>
 </div>
            
 <div class="form-group">
 <label class="col-sm-3 control-label">E-Mail</label>
 <div class="col-sm-6">
 <input type="email" class="form-control" required data-parsley-type="email" data-parsley-trigger="keyup" placeholder="Enter a valid e-mail" />    
        </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">URL</label>
 <div class="col-sm-6">
 <input type="url" class="form-control" required data-parsley-type="url" placeholder="URL" />
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Number</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-type="number" placeholder="Enter only numbers" />
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Alphanumeric</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-type="alphanum" placeholder="Enter alphanumeric value" />
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Select Box</label>
 <div class="col-sm-6">
 <select class="form-control" required>
      <option value="" selected="selected"> - Select - </option>
      <option>First Value</option>
      <option>Second Value</option>
             <option>Third Value</option>
      <option>Fourth Value</option>
 </select>
 </div>
 </div>
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Textarea</label>
 <div class="col-sm-6">
 <textarea required class="form-control"></textarea>
 </div>
 </div>
     
 <div class="form-group">
 <div class="col-sm-offset-3 col-sm-9 m-t-15">
 <button type="submit" class="btn btn-primary">Submit</button>
 <button type="reset" class="btn btn-default m-l-5">Cancel</button>
 </div>
 </div>
     
</form>

Añadir validación Parsley con Javascript

<script src="jquery-1.12.4-jquery.min.js"></script>
<script src="parsleyjs/dist/parsley.min.js"></script>
 
<script>
$(document).ready(function(){
 $('form').parsley();
});
</script>

El archivo parsley.css sirve también para dar estilo a los errores de la validación, pero aquí utilizo bootstrap por el diseño del formulario del cual hice varios cambios para adaptarlo a mis necesidades.

input.parsley-error,
select.parsley-error,
textarea.parsley-error {    
    border-color:#843534;
    box-shadow: none;
}


input.parsley-error:focus,
select.parsley-error:focus,
textarea.parsley-error:focus {    
    border-color:#843534;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}

Existen muchos data-attributes que puedes utilizar. En este código solo utilizo los más comunes, es decir, los más utilizados en las operaciones rutinarias, pero no por ello, no las vamos a explicar.

  • data-parsley-required: Hace que el campo sea obligatorio
  • data-parsley-pattern="^[a-zA-Z ]+$": El patrón solamente acepta caracteres alfabéticos con espacios
  • data-parsley-length="[6, 10]": Define el tamaño de la cadena. En este caso entre 6 y 10 caracteres
  • data-parsley-trigger="keyup": Dispara la validación en el evento keyup
  • data-parsley-equalto="#pass2": Confirma si el valor de dos campos es el mismo especificándole el ID
  • data-parsley-type="email": Comprueba si el valor es una dirección de email
  • data-parsley-type="number": Comprueba si el valor es un número
  • data-parsley-type="alphanum": Comprueba si el valor es alfanumérico

Fuente: codingcage.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR