Del lado del cliente la validación de formularios con jQuery
06 de noviembre 2008 por Felipe Beel · 1 comentario
Este tutorial te mostrará cómo validar un sencillo formulario de contacto con el bassistance plugin de jQuery validación. Esto le permitirá validar un formulario antes de que se ha presentado. Ver la demo aquí.
Paso 1 - El Formulario de
Esta misma forma se presentó en el Tutorial Ajax Formulario de Contacto . Así que si usted desea ampliar la forma original, este tutorial debería permitir que lo haga con bastante facilidad.
Para empezar necesitamos un nuevo archivo, que llamaremos contact.html, en el que vamos a crear nuestro formulario como tal.
<div id="container">
<form id="contactForm" method="" action="">
<p>
<label for="name">Name </label>
<input id="name" name="name" />
</p>
<p>
<label for="email">E-Mail </label>
<input id="email" name="email" />
</p>
<p>
<label for="message">Your Message </label>
<textarea id="message" name="message" rows="4" cols="30" >
</textarea>
</p>
<p>
<input class="submit" type="submit" value="submit"/>
</p>
</form>
</div>
Ahora tenemos un sencillo formulario con dos campos y un cuadro de texto, que se validará.
Paso 2 - El Plugin
El plugin que está utilizando se puede descargar desde aquí , también necesitará una copia de jQuery, que puede ser descargado de aquí . Ahora que tenemos los archivos que necesitamos para la fijación a nuestro archivo contact.html como tal.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
Tenga en cuenta que es muy importante que llame a jQuery en la primera lo contrario, el marco no va a funcionar.
Paso 3 - El Código
El código en sí es muy ligero, échale un vistazo
//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
//set the rules for the field names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 2
},
},
//set messages to appear inline
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message"
}
});
});
Todo lo que estamos haciendo aquí es llamar a una función onload, que inicia la validación de la forma de validar el uso. El plugin requiere validar pasar a través de un paramenters pocos.
reglas - permite especificar los nombres de campo que desea actuar en consecuencia, en nuestro caso hemos utilizado el nombre, email y mensaje. Dentro de esto se especifica si el campo es requerido o no, por el que pasa ya sea verdadera o falsa, queremos validar todos los campos, por lo que todos están marcados como verdadera. El siguiente parámetro es minLength, que .. usted lo adivinó, le permite establecer un número mínimo de caracteres a introducir.
mensaje - permite configurar un mensaje específico para un campo determinado, si opta por no establecer un messge, se proporciona uno por defecto que va a decir algo como "este campo es obligatorio!"
Paso 4 - ordenado It Up
Para que los mensajes de advertencia aparecen más evidentes que podemos añadir un poco de estilo, aunque esto no es imprescindible. Usted puede notar que cuando un mensaje de error aparece su envuelta en una clase que se llama error de lo que es fácil para nosotros para añadir algo de información sobre el estilo de este modo
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}Y eso es todo lo que hay que hacer. Descargar el código y probar por ti mismo aquí
Útiles, pero, por supuesto, usted todavía tiene que tener la validación del lado del servidor también.