<script src="../jquery-1.6.2.min.js" type="text/javascript" charset="iso-8859-1"></script>
<script src="plugin/jquery.validate.js" type="text/javascript"></script>
<style>
input { font-size:16px; width:320px; }
.valid { background: #ffffff;}
div.error { font-size:70%; width:320px; color:#FF0000;font-family:"Trebuchet MS"; }
span.required {font-weight: bold; color: #FF0000; width:320px;}
</style>
<form id="myform" method="post">
<h2><span>Registro</span> usuario:</h2>
<p>
<label for="email">E-mail: <span class="required">*</span></label><br/>
<input type="text" size="50" id="email" name="email" value="" />
</p>
<p>
<label for="password">Password: <span class="required">*</span></label><br/>
<input type="password" size="50" id="password" name="password" value="" />
</p>
<p>
<label for="alguno">Campo no-importante: </label><br/>
<input type="text" size="50" id="alguno" name="alguno" value="" />
</p>
<p>
<label for="username">Apodo: <span class="required">*</span></label><br/>
<input type="text" size="50" id="username" name="username" value="" />
</p>
<p><input name="enviar" value="Enviar" type="submit"></p>
</form>
<script>
// el arreglo JSON podria generarse desde PHP extrayendo dde base de datos info de los campos (requerimientos y mensajes)
$(function(){
$('form').validate({
rules:
{
'email': { required: true, email: true }, // lo que rastrea son los names!
'password': { required: true, minlength: 6 },
'username': { required: true, minlength: 2 }
},
messages:
{
'username': { required: 'Debe ingresar nombre de usuario', minlength: 'Longitud minima de 2 caracteres' },
'password': { required: 'Debe ingresar password', minlength: 'Longitud minima de 6 caracteres' },
'email': { required: 'Debe ingresar un correo electrónico', email: 'Debe ingresar el correo electrónico con el formato correcto. Por ejemplo:
[email protected]' }
},
debug: true,
submitHandler: function(form)
{
alert('El formulario ha sido validado correctamente!');
},
errorElement: "div"
});
});
</script>
<script>
// agrego clase error a todos los <INPUT> requeridos* dejando preparado todo para el evento focusOut
$('p > label > span.required').parent().parent().children('input' ).addClass('error');
$('form').submit(function() {
$('input.error').css({border: '2px red solid', background: '#faffbd'});
return false;
});
//var parent = $(this).parent();
$('input.error').live('focusout', function(e)
{
$(this).css({border: '2px red solid', background: '#faffbd'});
var parent = $(this).parent();
if (parent.children('div.error').length ==0){
parent.append('<div class="error">Campo obligatorio</div>');
}
});
$('input.valid').live('focusout', function(e)
{
$(this).css({border: '1px grey solid', background: '#ffffff'});
var parent = $(this).parent();
if (parent.children('div.error').length !=0){
parent.children('div.error').empty();
}
});
</script>