Validacion de formularios con prototype
- Sep
- 17
2 comentarios! 301 palabras - 1 hits
validacion de formularios utilizando selectores css y prototype
Siempre he creído que la mejor manera de verificar los datos de un formulario consta de dos partes.
En primer lugar, una validación simple del lado del cliente mediante javascript, donde se comprueba que todos los campos requeridos contengan datos y que estos datos estén en el formato que se esperan.
La segunda parte del proceso se ejecuta en el servidor y se basa en comprobaciones mas estrictas donde se verifica la integridad de los datos.
Para la primera validación, la que se realiza en el lado del cliente antes de enviar ningún dato, existe muchas combinaciones, en este caso, veremos como hacerlo de forma muy simple ayudados de la librería prototype.
Lo primero que tenemos que hacer es diseñar nuestro formulario y decidir que campos necesitamos comprobar.
- <form action="." method="post" id="usrFrm" onsubmit="checkForm(this.id);">
- <fieldset>
- <legend>Datos del usuario</legend>
- <label for="name"><input type="text" id="name" class="required" value="nombre" /></label>
- <label for="email"><input type="text" id="email" class="required email" value="nombre" /></label>
- <label for="phone"><input type="text" id="phone" class="required numeric" value="nombre" /></label>
- <label for="url"><input type="text" id="url" class="required" value="nombre" /></label>
- </fieldset>
- <p><input type="submit" id="submit" value="Enviar" /></p>
- </form>
Como se puede ver, utilizo tres clases diferentes para marcar los campos del formulario, con la siguiente función podremos validar cada campo utilizando selectores css, es decir, se comprobara que todos los campos marcados con la clase “required” contengan datos, además, se comprobara el formato de los datos en los campos marcados como “email” o “numeric”,
- function checkForm(id) {
- var error = false;
- $$('form#'+id+' .required').each(function(node){
- if (node.value == "") {
- error = true;
- node.style.background = "#F00";
- }
- });
- $$('form#'+id+' .email').each(function(node){
- if ((node.value.indexOf(".") > 2) && (node.value.indexOf("@") > 0)) {
- error = true;
- node.style.background = "#F00";
- }
- });
- $$('form#'+id+' .numeric').each(function(node){
- var strChars = "0123456789.-";
- for (i = 0; i < node.value.length; i++) {
- strChar = node.value.charAt(i);
- if (strChars.indexOf(strChar) == -1) {
- error = true;
- node.style.background = "#F00";
- }
- }
- });
- if (error == true) {
- alert('Asegurate de rellenar todos los campos requeridos');
- } else {
- $(id).submit();
- }
- }
esta claro que no podemos basar la integridad de los datos en este tipo de comprobaciones, pero son un primer filtro que le da mas dinamismo a la aplicacion ya que permite al usuario corregir errores sin tener que esperar a las comprobaciones del servidor, que por norma suelen ser mas lentas.
2 comentarios
# Escrito por Roberto Mitma hace 3 años, 5 meses
hola alex; Te cuento q’ estoy trabajando con un código parecido… a
<
form action=”.” method=”post” id=”usrFrm” onsubmit=”checkForm(this.id);”>
con css. Pero no con el ‘Id’ yo estoy usando el ‘class’, mi etiquieta ‘form’ queda así…
este es el código fuente html…
PruebaCalendario CONSULTAR RANGOS DE FECHAS
si le quito el atributo ‘class’ del ‘form’ funciona el ‘onsubmit’ pero si lo pongo funciona solo el class..
# Escrito por Juanjo hace 3 años
Muchas gracias Alex, me ha sido de mucha utilidad.