un ejemplo para el email
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
/*<![CDATA[*/
label{
width: 150px;
display: inline-block;
}
/*]]>*/
<script type="text/javascript">
function validar(){
var nombre = document.getElementById('nombre').value;
var email = document.getElementById('email').value;
var email2 = document.getElementById('email2').value;
var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
// validamos si el campo nombre está vacío o no
nombre = nombre.replace(/(<([^>]+)>)/ig,""); // quitás posible código html
nombre = nombre.replace(/^\s+/g,'').replace(/\s+$/g,'');// limpias espacios en blanco al inicio y final del nombre
if(nombre == ''){
alert('Ingrese su nombre')
return false;
}
var regex_email = formato.test(email);
if((regex_email != true)||(email == "")){
alert('Email no válido');
return false;
}
var regex_email2 = formato.test(email2);
if((regex_email2 != true)||(email2 == "")){
alert('Email2 no válido');
return false;
}
if(email != email2){
alert('los emails no coinciden');
return false;
}
/// Si no hubo ningún error, el form se procesa
alert('gracias ' + nombre);
}
<form action="#" onsubmit="return validar();"> <label for="nombre">Nombre:
</label><input type="text" value="" id="nombre" name="nombre" /><br /> <label for="email">Email:
</label><input type="text" value="" id="email" name="email" /><br /> <label for="email2">Verificar Email:
</label><input type="text" value="" id="email2" name="email2" /><br /> <input type="submit" value="Enviar" />
las longitudes de las cadenas, tendrias que chequear la propiedad
length
Para las alertas, crear una capa/span con un id asignado, por ejemplo
<span id="mensajes"></span>
y antes del return false; haces un
innerHTML con el texto del error
Otra variante es que no hagas un return false por cada elemento validado, sino que lo hagas asi
al inicio de la función inicializás una variable con un valor = ""
var mensaje="";
en cada validacion por ejemplo, el nombre, en lugar de esto
if(nombre == ''){
alert('Ingrese su nombre')
return false;
}
hacés
if(nombre == ''){
mensaje += "<p>Falta nombre</p>";
}
se usa el += para concatenar los valores
después con otra
if((regex_email != true)||(email == "")){
mensaje += "<p>email no vválido</p>";
}
ahora si, trás todas las validaciones
if(mensaje != ""){
// haces un innerHTML a la capa que creaste con los mensajes con el valor de la variable mensaje
return false; // -> cancelás el submit
}
Saludos