Todos los que nos dedicamos al desarrollo o diseño web, en algún momento dado se nos ha presentado la necesidad de validar algún formulario y pues tenemos que recurrir a diferentes opciones para hacerlo ya sea del lado del servidor o de lado del navegador según sea el caso, el día de hoy les voy a comentar una forma que para mi me a funcionado y que nos puede ahorrar muchos dolores de cabeza.
Para este caso estoy utilizando el ya famoso Framework Jquery junto con un Plugin llamado jQuery.Validate.
En mi caso tenía que validar una serie de radio buttons de mi formulario y con solo el nombre de mi Formulario pude lograrlo, a continuación paso a explicar a groso modo como lo logre, simplemente agregue entre las etiquetas <head></head> este codigo, como podran darse cuenta lo unico que hice fue declarar el nombre de mi formulario el cual se llama #miFormulario y le agregue la funion validate(), eso fue todo ya que basicamente todo lo que este dentro del formulario lo va a validar agregando la siguiente clase class=»required», como podran ver es muy facil de implementar este plugin.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#miFormulario").validate();
});
</script>
Un ejemplo completo de como lo pueden implementar sería el siguiente:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#miFormulario").validate();
});
</script>
</head>
<body>
<form id="miFormulario" method="get" action="">
<fieldset>
<legend>Un simple formulario de comentarios validado y con mensajes prediseñados</legend>
<p>
<label for="cnombre">Nombre</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomentario">Tu comentario</label>
<em>*</em><textarea id="ccomentario" name="comentario" cols="22" class="required"></textarea>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>
</fieldset>
</form>
</body>
</html>
El exito de este plugin radica en la clase que se manda llamar para validar, si ponen un poco de atención, en el input de Email utilizo la clase «required email», con lo cual el tipo de validación que hace va ser de tipo Correo electrónico donde tiene que hacer uso de @ y de un dominio valido, con esto ya estamos del otro lado caray ya que no, nos tendremos que preocupor acerca de este tipo de cosas así como esta clase existen algunas otras especificas dependiendo del tipo de campo que necesitemos validar:
- required: «This field is required.»
- remote: «Please fix this field.»
- email: «Please enter a valid email address.»
- url: «Please enter a valid URL.»
- date: «Please enter a valid date.»
- dateISO: «Please enter a valid date (ISO).»
- number: «Please enter a valid number.»
- digits: «Please enter only digits.»
- creditcard: «Please enter a valid credit card number.»
- equalTo: «Please enter the same value again.»
- accept: «Please enter a value with a valid extension.»
Dentro de la pagina de Jquery pueden ver muchas otras formas de implementar este Plugin yo simplemente les estoy mostrando una forma rápida y fácil, aparte ya sabes que cada proyecto es diferente les dejo el link a la página del plugin y espero les sirva tanto como a mi.
http://docs.jquery.com/Plugins/Validation/validate
Saludos
La Chabela 
[…] Actualizados : Como validar formularios con Jquery Los gobiernos a la Web […]