Hace dias me tope con la necesidad de validar un fomulario con JavaScript , investigando por ahi me encontre con este plug in para JQuery que la verdad esta muy facil de usar y muy rápido de implementar.
Lo que se necesita para hacer la validación
ya con eso descargado hacemos un pequeño ejemplo.
En un archivo HTML “prueba.html”, agregamos el sig. código.
1.- La referencia a las librerias. (yo renombre las librerias para que se vieran más limpios los include)
<script src="includes/jquery.js"><!--mce:0--></script>
<script src="includes/jquery.validate.js"></script>
2.- creamos el formulario.
<form name="frmDatos" id="frmDatos">
<table>
<tr>
<td>
<input type="text" name="nombre" id="nombre" />
</td>
</tr>
<tr>
<td>
<input type="text" name="mail" id="mail" />
</td>
</tr>
<tr>
<td>
<input type="text" name="edad" id="edad" />
</td>
</tr>
</table>
<input id="buton"type="submit" value="Enviar" />
</form>
3.- Se crea la función que realiza la validación. (Que realmente es muy facil , usando los id de los campos le indicamos el tipo de validación)
$(document).ready(function() {
$("#frmDatos").validate({
rules: {
nombre: "required",
mail: {required: true,email: true},
edad: {number: true}
},
messages: {
nombre: "Nombre incorrecto",
mail : "Email no Valido",
edad : "Edad Incorrecta"
}
});
});
En este caso tambien personalizamos el mensaje con el que muestra el error, ya que si no usamos este mensaje el plug-in cuenta con mensajes pero en ingles.
Ya para terminar , se crea una clase de estilo para darle formato al mensaje a mostrar.
<style>
.error-message, label.error {
color: #ff0000;
margin:0;
display: inline;
font-size: 1em !important;
font-weight:lighter;
}
</style>
Espero y esto le pueda servir a alguien como a mi Saludos !!
aqui pongo el link de Descarga de este sencillo ejemplo.