Cliente-Validación de formularios con jQuery
6 de noviembre 2008 por Philip Beel · 1 Comentario 
Este tutorial te mostrará cómo validar un sencillo formulario de contacto usando el bassistance plugin de validación de jQuery. Esto le permitirá validar un formulario antes de que se ha presentado. Vea la demostración aquí.
Paso 1 - El formulario de
Esta misma forma fue presentado en el formulario de contacto Ajax Tutorial. Así que si quieres ampliar la forma original, este tutorial que te permiten hacerlo con bastante facilidad.
Para empezar, necesitamos un nuevo archivo, que llamaremos contact.html, en que vamos a crear nuestro formulario como así.
<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 2 campos y un cuadro de texto, que se validará.
Paso 2 - El Plugin
El plug-in que estamos utilizando se puede descargar desde aquí, también se necesita una copia de jQuery, que puede ser descargado desde aquí. Ahora que tenemos los archivos que necesitamos para unir a nuestro archivo contact.html como así.
<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 el primer marco de lo contrario, el no funcionará.
Paso 3 - El Código
El peso del código en sí es muy ligero, check it out
//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 del formulario con validación. El plugin validar requiere pasar por un paramenters pocos.
reglas - permite especificar los nombres de campo que desea actuar sobre, en nuestro caso hemos utilizado el nombre, email y mensaje. Dentro de esto estamos especificando si el campo es obligatorio o no, que pasa por verdadero o falso, queremos validar todos los campos, por lo que todos están marcados como verdadero. El siguiente parámetro es Minlength, .. que lo has adivinado, le permite establecer un número mínimo de caracteres a introducir.
mensaje - permite definir un mensaje específico para un ámbito determinado, si decide no establecer un messge, un defecto es que siempre dirá algo como "Este campo es obligatorio"
Paso 4 - Tidy It Up
Para que los mensajes de advertencia aparecen más notable que podemos añadir algo de estilo, aunque esto no es imperativo. Usted puede notar que cuando un mensaje de error aparece su envueltos en una clase llamada de error por lo que es sencillo para nosotros, para añadir información de estilo, como lo
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}Y eso es todo lo que hay. Descargar el código y pruebe usted mismo aquí
Útil, pero por supuesto que todavía necesita que se validación en el servidor también.