Experiencias Java: Ejemplo Validacion de Formulario con JQuery

lunes, 27 de julio de 2009

Ejemplo Validacion de Formulario con JQuery

Un ejemplo usando mas validaciones (required, digits, min, max, email, number) con jQuery

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>