JS:
> jquery.js
> jquery.validate.js
<html>
<head>
<script src='../js/jquery.js' type='text/javascript'></script>
<script src='../js/jquery.validate.js' type='text/javascript'></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
input.error, input select.error {
border: 1px solid red;
}
label.error{
color:blue;
}
</style>
</head>
<body>
<form name="nombreForm" id="idNombreForm">
<table>
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre" id="nombre"/></td>
</tr>
<tr>
<td>Edad:</td>
<td><input type="text" name="edad" id="edad"/></td>
</tr>
<tr>
<td>Sueldo:</td>
<td><input type="text" name="sueldo" id="sueldo"/></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"/></td>
</tr>
</table>
<input type="submit" value="Enviar"/>
</form>
</body>
<script>
var reglas = {
nombre: {required:true},
edad: {required:true, digits:true, min:1, max:150},
sueldo: {required:true, number:true,},
email:{required: true, email:true},
};
var mensajes = {
nombre: {required:"Nombre Requerido"},
edad:{required:"Edad Requerida", digits:"Campo edad acepta solo numeros enteros",
min:"Edad minima 1" , max:"Edad maxima 150"},
sueldo:{required:"Sueldo Requerido", number:"Campo acepta solo numeros reales"},
email:{required:"Email Requerido", email:"Formato de Email incorrecto"},
};
$(document).ready (
function(){
$("#idNombreForm").validate ({
rules:reglas,
messages:mensajes
});
} );
</script>
</html>
Ejemplo Funcional:
Ver Ejemplo
Suerte.
