Este sencillo ejemplo de validacion de formularios con la libreria ajax llamada PROTOTYPE nos permite realizar una validacion de los campos de un formulario, en ocasiones es bueno y seguro para la aplicacion ya que se puede desde la capa de presentacion decirle al usuario cual es el dato requerido para cada campo en el formulario y asi evitar que los datos que lleguen a nuestra capa de controladores tengan que ser validados de nuevo.
<html>
<head>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/effects.js" type="text/javascript"></script>
<script type="text/javascript" src="fabtabulous.js"></script>
<script type="text/javascript" src="validation.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<h1>Formulario de Registro de Nuevo Usuario </h1>
<div id="mainmenu">
<div id="tab2"><ul id="taabs">
<a href="#standard">Nuevo Usuario </a>
<a href="#using-titles">Nueva Afiliacion </a>
<a href="#no-element-ids">Mas Informacion</a>
</ul><div>
<div class="bar"> </div>
<div class="panel" id="standard">
<form id="test" action="registro.jsp" method="post">
<table width="405" border="0" align="center">
<tr>
<td width="399"><ul id="tabs1">
<a href="#standard1">Tu Cuenta</a>
<a href="#using-titles1">Profesional</a>
<a href="#no-element-ids1">Mas Informacion</a>
</ul><div>
<div class="bar"> </div>
<div class="panel" id="standard1">
<fieldset>
<legend>Datos para la Cuenta Nueva </legend>
<div class="form-row">
<div class="field-label">
<label for="nombre">Nombre Completo </label>
:</div>
<div class="field-widget"><input name="nombre" class="required" id="nombre" title="Ingrese su Nombre Completo" size="30" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidos" class="required" id="apellidos" title="Enter your name" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Documento de Identidad </label>
:</div>
<div class="field-widget"><input name="cedula" class="validate-number" id="cedula" title="Ingrese su Nombre Completo" size="20" />
No de Cedula</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Nombre de Usuario</label>
:</div>
<div class="field-widget"><input name="user" class="required" id="user" title="Enter your name" size="30" />
</div>
</div>
<div class="form-row">
<div class="field-label"><label for="pass">Password</label>:</div>
<div class="field-widget"><input type="password" name="pass" id="pass" class="required validate-password" title="Ingrese un password con mas de 6 caracteres" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="password">Confirmar Password</label>:</div>
<div class="field-widget"><input type="password" name="password" id="password" class="required validate-password-confirm" title="Ingrese el password de confirmacion" />
</div>
</div>
<p><a href="#" onClick="$('email-signup').toggle(); return false">Ingrese Su Correo Electronico!</a></p>
<div id="email-signup" class="form-row" style="display:none;">
<div class="field-label"><label for="email">Email</label>:</div>
<div class="field-widget"><input name="email" id="email" class="required validate-email" title="Opcional: Ingrese su Correo Electronico" size="50"/></div>
</div>
</fieldset>
</div>
<div class="panel" id="using-titles1">
<fieldset>
<legend>Informacion Profesional del Usuario </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">Empresa</label>:</div>
<div class="field-widget"><input name="empresa" class="required" id="empresa" title="Enter your name. This is a required field" size="50" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field3-t2">Profesion</label>:</div>
<div class="field-widget"><input name="profesion" class="required" id="profesion" title="Enter your employee number, please use only alphanumeric characters" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field4-t2">Cargo Actual </label>
:</div>
<div class="field-widget"><input name="cargoactual" class="required" id="cargoactual" title="Optional: Enter your age, please use only numbers" size="40" />
(opcional)</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Tiempo de Labores Profesionales </label>
:</div>
<div class="field-widget"><input name="tlabores" class="validate-number" id="tlabores" title="Optional: Enter a dollar amount for donation" size="10" />
(Anos)</div>
</div>
</fieldset>
<div align="center"><br>
<input name="evento" type="submit" class="boton" id="evento" value="Enviar" />
<input name="evento" type="button" class="boton" id="evento" onClick="valid.reset(); return false" value="Limpiar" />
</div>
</div>
<div class="panel" id="no-element-ids1">
<fieldset>
<legend>Registrar Otros Servicios </legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema </label>
:</div>
<div>
<p align="justify" >Por favor ingresa los datos generales y tambien los datos laborales, luego si envia el formulario. Para Solicitar tus datos personales llena el formulario para Forzar el Password. Estos datos seran consultados y validados por el sistema y le seran arrojados los valores de la consulta en el email que se regsitro para la cuenta de usuario.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset>
</div>
</div> </td>
</tr>
</table> <script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
Validation.addAllThese([
['validate-password-confirm', 'La Confirmacion del Password es Invalida. Por favor intentelo nuevamente', {
equalToField : 'pass'
}]
]);
</script></form>
</p></div>
<div class="panel" id="using-titles">
<form id="afiliacion" action="afiliacion.jsp" method="post">
<table width="405" border="0" align="center">
<tr><td><table width="396" border="0" align="center">
<tr>
<td class="field-label">Fecha de Afiliacion:</td>
</tr>
</table></td></tr>
<tr>
<td width="399"><ul id="tabs2">
<a href="#standard2">Identificacion</a>
<a href="#using-titles2">Domicilio</a>
<a href="#inforeferido2">Referido</a>
<a href="#no-element-ids2">Mas Informacion</a>
</ul><div>
<div class="bar"> </div>
<div class="panel" id="standard2">
<fieldset>
<legend>Datos para la Afiliacion </legend>
<div class="form-row">
<div class="field-label">
<label for="nombre">Id de Usuario </label>
:</div>
<div class="field-widget"><input name="id" class="required" id="id" title="Ingrese El Id de Usuario" size="10" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="nombre">Nombre Completo </label>
:</div>
<div class="field-widget"><input name="nombre" class="required" id="nombre" size="30" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidos" class="required" id="apellidos" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Sexo </label>
:</div>
<div class="field-widget"><input type="radio" name="sexo" id="sexo" value="M" />
Masculino<br />
<input type="radio" name="sexo" id="sexo" value="F" class="validate-one-required" />
Femenino</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Tipo de Documento </label>
:</div>
<div class="field-widget">
<select name="tipodocumento" class="required" id="tipodocumento">
<option>Seleccione..</option>
<option value="1">Cedula</option>
<option value="2">C. Extranjeria</option>
</select>
Tipo de Documento </div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">No de Documento </label>
:</div>
<div class="field-widget"><input name="nodocumento" class="required validate-number" id="nodocumento" title="Ingrese el numero del documento" size="20" />
No del Documento </div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Telefono</label>
Fijo:</div>
<div class="field-widget"><input name="telfijo" class="required validate-number" id="telfijo" title="Ingrese un Telefono Fijo" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="pass">Telefono Celular </label>
:</div>
<div class="field-widget"><input name="telcel" id="telcel" class="required validate-number" title="Ingrese un Numero Celular" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="password">Profesion</label>
:</div>
<div class="field-widget"><input name="profesion" class="required" id="profesion" title="Ingrese su Profesion" size="50" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="password">Web</label>
:</div>
<div class="field-widget"><input name="web" class="required validate-url" id="web" title="Ingrese el password de confirmacion" size="40" />
</div>
</div>
<p><a href="#" onClick="$('email-signup').toggle(); return false">Ingrese Su Correo Electronico!</a></p>
<div id="email-signup" class="form-row" style="display:none;">
<div class="field-label"><label for="email">Email</label>:</div>
<div class="field-widget"><input name="email" id="email" class="required validate-email" title="Opcional: Ingrese su Correo Electronico" size="50"/></div>
</div>
</fieldset>
</div>
<div class="panel" id="using-titles2">
<fieldset>
<legend>Informacion de Domicilio a Efecto de Notificaciones </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">Ciudad</label>
:</div>
<div class="field-widget"><input name="ciudad" class="required" id="ciudad" title="Enter your name. This is a required field" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field3-t2">Barrio</label>
:</div>
<div class="field-widget"><input name="barrio" class="required" id="barrio" title="Ingrese el Nombre del Barrio de Residencia" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field4-t2">Telefono </label>
:</div>
<div class="field-widget"><input name="telefono" class="required validate-number" id="telefono" title="Ingrese un Numero de Telefono de Domicilio" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field4-t2">Entidad </label>
:</div>
<div class="field-widget"><input name="entidad" class="required" id="entidad" title="Ingrese el nombre de la Entidad" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field4-t2">Direccion </label>
:</div>
<div class="field-widget"><input name="direccion" class="required" id="direccion" title="Ingrese una Direccion Valida de Ubicacion" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Oficina </label>
:</div>
<div class="field-widget"><input name="oficina" class="required" id="oficina" title="Ingrese un identificador de Oficina" size="30" />
</div>
</div>
</fieldset>
</div>
<div class="panel" id="inforeferido2">
<fieldset>
<legend>Informacion del Referido </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">No Documento </label>
:</div>
<div class="field-widget"><input name="nodocrefe" class="required validate-number" id="nodocrefe" title="No del Documento de quien lo refirio" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1-t2">Nombre </label>
:</div>
<div class="field-widget"><input name="nombrerefe" class="required" id="nombrerefe" title="Ingrese el Nombre de Quien lo Refirio" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1-t2">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidosrefe" class="required" id="apellidosrefe" title="Ingrese el Apellido de quien lo Refirio" size="50" />
</div>
</div><div align="center"><br>
<input name="evento" type="submit" class="boton" id="evento" value="Enviar" />
<input name="evento" type="button" class="boton" id="evento" onClick="valid.reset(); return false" value="Limpiar" />
</div>
</fieldset>
</div><div class="panel" id="no-element-ids2">
<fieldset>
<legend>Informacion para el Afiliado </legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema </label>
:</div>
<div>
<p align="justify" >Por favor ingresa todos los datos en el formularios de afiliacion. un administrador aprobara la afiliacion y te enviara el codigo unico de usuario al email registrado.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset>
</div>
</div> </td>
</tr>
</table> <script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('afiliacion', {immediate : true, onFormValidate : formCallback});
</script></form>
</p></div>
<div class="panel" id="no-element-ids">
<form id="test3" action="#" method="get">
<fieldset>
<legend>Mensaje</legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema </label>
:</div>
<div>
<p align="justify" class="required">Para Solicitar tus datos personales llena el formulario para Forzar el Password. Estos datos seran consultados y validados por el sistema y le seran arrojados los valores de la consulta en el email que se regitro para la cuetna de usuario.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset><br>
</form>
</div>
</div></div>
</div></div>
<script type="text/javascript">
new Fabtabs('taabs');
new Fabtabs('tabs1');
new Fabtabs('tabs2');
</script>
</body>
</html>
Ver Ejemplo en Linea.
No hay comentarios:
Publicar un comentario