#JavaScript validar formularios by @aulaclic

Fuente: aulaclic.es

En la propia página, ya que la función solo se utilizará en esta página, creamos una función, a la que le pasamos el formulario.

Lo que hará la función, es evaluar uno a uno los campos. Si encuentra un error, mostrará un mensaje, pondrá el foco (el punto de inserción) en el control, y devolverá falso. Si no hay errores, continúa con el siguiente campo. Al final, si no se ha producido ningún error, debe de devolver true.

Como le pasamos como parámetro el formulario, podemos acceder a los valores de so control con la estructura formulario.nombre.value:

<script type="text/javascript">// <![CDATA[
function validarForm(formulario) {
  if(formulario.nombre.value.length==0) { //¿Tiene 0 caracteres?
    formulario.nombre.focus();    // Damos el foco al control
    alert('No has escrito tu nombre'); //Mostramos el mensaje
    return false; //devolvemos el foco
  }
  return true; //Si ha llegado hasta aquí, es que todo es correcto
}
// ]]></script>

Utilizamos el método .length, que devuelve la longitud de una cadena, para comprobar si el número de caracteres es 0. Si es 0, la cadena está vacía.

Repetimos esto para el resto de comprobaciones, dejando el return true; al final del todo, para que sólo llegue ahí si todos los campos están correctos:

<script type="text/javascript">// <![CDATA[
function validarForm(formulario) {
  if(formulario.nombre.value.length==0) { //comprueba que no esté vacío
    formulario.nombre.focus();   
    alert('No has escrito tu nombre'); 
    return false; //devolvemos el foco
  }
  if(formulario.email1.value.length==0) { //comprueba que no esté vacío
    formulario.email1.focus();
    alert('No has escrito tu e-Mail');
    return false;
  }
  if(formulario.email1.value!=formulario.email2.value) {
    formulario.email1.focus();            //comprueba que sean iguales
	alert('Los e-Mails no coinciden');
    return false;
  }
  if(formulario.consulta.value.length==0) {  //comprueba que no esté vacío
    formulario.consulta.focus();
    alert('No has escrito ninguna consulta');
    return false;
  }
  return true;
}
// ]]></script>

Ahora tenemos que llamar a la función. Lo haremos, cuando se vaya a enviar el formulario, es decir, en el evento onsubmit del form.

</pre>
<form action="enviar_mail.php" method="post" onsubmit="return validarForm(this);">

Observa que como parámetro hemos enviado this. Se trata de una palabra reservada que equivale al objeto que ha producido el evento, en este caso el formulario. Además, antes de la función hemos puesto return. Lo hemos hecho, porque si en un evento ponemos return false;, el evento se anula, en cambio si ponemos return true; continúa. Por eso es importante que la función devuelva false cuando queramos que no se envíe el formulario, y que devuelva true cuando queramos que se envíe.

Anuncios

javascript: controlar entrada de datos en caja de texto (este si que funciona en chrome, firefox y explorer)

Con este código se valida lo que va tecleando el usuario en un cuadro de texto o un textarea. Puede validarse que solo escriban números, solo letras, números y letras, determinados caracteres…

Primero veremos el código (con la posibilidad de ver el ejemplo funcionando) y comentaremos el significado y funcionamiento de algunas líneas. Más adelante pondremos varias modificaciones del código original para que se adapte a lo que necesitemos en determinado momento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Validar entrada de datos</title>
<script type="text/javascript">
function validar(e) { // 1
    tecla = (document.all) ? e.keyCode : e.which; // 2
    if (tecla==8) return true; // 3
    patron =/[A-Za-z\s]/; // 4
    te = String.fromCharCode(tecla); // 5
    return patron.test(te); // 6
}
</script>
</head>

<body>
<p><input type="text" name="textfield" onkeypress="return validar(event)" /><br />
<textarea rows="5" cols="20" onkeypress="return validar(event)"></textarea></p>
</body>
</html>

Ver ejemplo

A continuación la explicación de las líneas de código que aparecen numeradas:

1- A la función se le pasa el objeto event

2- Aquí hay que distinguir si el navegador es Internet Explorer (IE) document.all u otro, porque ya os habreis dado cuenta que no todos los navegadores son iguales. Si el navegador es IE se asigna a la variable tecla el valor de e.keyCode, en caso contrario se asigna el valor de e.which. En los dos casos se obtiene el valor ASCII de la tecla pulsada.

3- En esta línea se comprueba si es la tecla pulsada es la tecla de retroceso y en ese caso la función termina (retorna). De esta forma se permite borrar caracteres.

4- Aquí se pone la expresión regular que permite validar si se admite o no la pulsación. En el ejemplo se admiten letras mayúsculas A-Z, letras minúsculas a-z y el espacio \s

5- Se pasa el valor ASCII de la variable tecla a su carácter correspondiente

6- Si el carácter coincide con el patrón, la función devuelve true, si no coincide devuelve false.

Ahora vamos a ver varias expresiones regulares para distintas validaciones. Sustituye la línea 4 por la que necesites:

patron = /\d/; // Solo acepta números
patron = /\w/; // Acepta números y letras
patron = /\D/; // No acepta números
patron =/[A-Za-zñÑ\s]/; // igual que el ejemplo, pero acepta también las letras ñ y Ñ

También se puede hacer un patrón que acepte determinados caracteres, poniendolos entre corchetes. Veamos un ejemplo para validar que solo se acepte a, j, t, 6 y 9:

patron = /[ajt69]/;

O el caso contrario, queremos aceptar cualquier caracter, menos alguno. Los que no nos sirven se ponen en el patron y se cambia un poco el código de la función que usamos para validar

patron =/[javierb]/; // 4
te = String.fromCharCode(tecla); // 5
return !patron.test(te); // 6

Fuente: http://www.telefonica.net/web2/blas-mar/validarformu.html