Validación personalizada de formulario

Escrito por: Martín el 03-03-2009 09:54:28 y leído 1069 veces

Esta vez, como tenía que validar un formulario y no quise usar jQuery para hacerlo, me puse a escribir mi propia función.

Necesita solamente de unos toques de CSS y 2 funciones en javascript, una para validar en sí y otra para restablecer el ´class´ de los elementos si fueron rellenados por el usuario.

En mi ejemplo, el formulario se compondrá de 4 elementos básicos, 3 input text y un textarea para datos básicos de contacto, los cuales tienen que ser todos completados antes de enviar.

Manos a la obra...

1) El primer paso, será crear nuestro formulario, para ello, pongo a disposición el ejemplo usado en el código 1.

2) Lo segundo, será montar el CSS de ese formulario (ver código 2).

3) Y lo último, será poner nuestra función javascript antes del form (ver código 3).

El funcionamiento.
Es muy básico, al rellenar el formulario se ejecuta la función de validación... Si hay campos sin rellenar, no dejar enviar el formulario.

Mientras tanto...
Al picar texto sobre cada campo, se vuelve a ejecutar otra función más, que comprueba que el campo se rellenó, y en el caso de los e-mails, por expresiones regulares, comprueba que sea una dirección de correo válida.

Si te vale, mira la demo online para ver su funcionamiento y cópiate el código fuente de ahi para usarlo.

Seguramente se podrá mejorar... pero eso te lo dejo a tí!

Código XHTML

<p id="error" class='error' style='display:none'>Los campos marcados con * son requeridos.</p>
<p id="error2" class='error' style='display:none'>El e-mail no parece ser correcto.</p>
<form name="fvalida" id="registro" class="contacto" method="post" action="#">
<fieldset>Nombre*:<input type="text" name="nombre" id="nombre" onkeypress="javascript:revalida(this.id);" /></fieldset>
<fieldset>E-mail*:<input type="text" name="email" id="email" onkeypress="javascript:revalida(this.id);" /></fieldset>
<fieldset>Tel&eacute;fono*:<input type="text" name="telefono" id="telefono" onkeypress="javascript:revalida(this.id);" /></fieldset>
<fieldset>Consulta*:<textarea rows="3" name="mensaje" id="mensaje" onkeypress="javascript:revalida(this.id);"></textarea><input type="hidden" name="envio" value="SI" /></fieldset>
<fieldset><input type="button" id="enviar" name="enviar" value="Enviar Consulta" onclick="valida_envia()" class='boton1' /></fieldset>
</form>

Código CSS

/* color de borde de los campos requeridos */
.requerido {border:1px solid red !important;}
/* estilo para los párrafos de error */
.error {border:1px solid red;padding:5px;font-weight:bold;color:red !important;font:normal 12px Arial;}
/* estilo para desactivar el botón enviar */
.gris {background:gray !important;border:1px solid gray !important;color:#fff;border:0;padding:3px 0;margin:5px 0;font-size:11px;width:200px !important;}
/* estilo del form */
form.contacto {width:500px;margin:20px auto;font:normal 12px Arial;}
.contacto fieldset {border:0;margin:0 0 10px 0;text-align:left;}
.contacto select ,.contacto input ,.contacto textarea{margin: 5px 0;width:500px;padding:3px 0;border:1px solid #fba025;font-size:11px}
.contacto input.boton1 {background:#fba025;color:#fff;border:0;padding:3px 0;margin:5px 0;font-size:11px;width:200px;border:1px solid #fba025}

Código JAVASCRIPT

claseError="requerido";

function validoemail(email)
{
	var s = email;
	if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(s)) return true;
	else return false;
}

function valida_envia(){
	var nombre = document.fvalida.nombre.value;
	var telefono = document.fvalida.telefono.value;
	var email = document.fvalida.email.value;
	var mensaje = document.fvalida.mensaje.value;
	
	if (nombre.length==0 || telefono.length==0 || email.length==0 || mensaje.length==0){
		document.getElementById("error").style.display="block";
		if (nombre.length==0) document.fvalida.nombre.className=claseError; else document.fvalida.nombre.className="";
		if (telefono.length==0) document.fvalida.telefono.className=claseError; else document.fvalida.nombre.className="";
		if (email.length==0) document.fvalida.email.className=claseError; else document.fvalida.email.className="";
		if (mensaje.length==0) document.fvalida.mensaje.className=claseError; else document.fvalida.nombre.className="";
		return 0;
	}
	else 
	{
		document.fvalida.submit();
	}
	
}
function revalida(cual){
	var ese = document.getElementById(cual).value;
	if (ese.length>0){document.getElementById(cual).className="";}
	var nombre = document.fvalida.nombre.value;
	var telefono = document.fvalida.telefono.value;
	var email = document.fvalida.email.value;
	var mensaje = document.fvalida.mensaje.value;
	if (nombre.length>0 && telefono.length>0 && email.length>0 && mensaje.length>0){document.getElementById("error").style.display="none";}
	if (email.length>0){
		if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) 
		{
			document.fvalida.email.className="";
			document.getElementById("error2").style.display="none";
			document.getElementById("enviar").disabled=false;
			document.getElementById("enviar").className="boton1";
		}
		else
		{
			document.getElementById("error2").style.display="block";
			document.fvalida.email.className=claseError;
			document.getElementById("enviar").disabled=true;
			document.getElementById("enviar").className="gris";
		}
	}
}

Categorías: Validación • Formularios • Jquery • Css • Javascript • Html • •