En primer lugar te señalo que tu html contiene errores. Una vez hecha correctamente la identificación de los campos como te señalo @caricatos, estás cometiendo el siguiente error.
Hay dos formas básicas de hacerlo, la primera, ir verificando cada campo y, si hay error, mostrar un mensaje y cancelar el envío, la otra, realizar todas las validaciones, acumular los mensajes de error y mostrarlos todos juntos.
Creo que el siguiente ejemplo es más ilustrativo, las validaciones no son necesariamente las mismas, pero por ahí no pasa el problema, sino por la manera en que intentás cancelar el submit.
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"> //<![CDATA[
function validar(){
var mensaje = "";
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')
mensaje += "<p>falta nombre<\/p>";
//return false;
}
var regex_email = formato.test(email);
if((regex_email != true)||(email == "")){
//alert('Email no válido');
mensaje += "<p>falta email 1<\/p>";
//return false;
}
var regex_email2 = formato.test(email2);
if((regex_email2 != true)||(email2 == "")){
//alert('Email2 no válido');
mensaje += "<p>falta email 2<\/p>";
//return false;
}
if(email != email2){
//alert('los emails no coinciden');
mensaje += "<p>email no coincide<\/p>";
//return false;
}
if(mensaje == ""){
/// Si no hubo ningún error, el form se procesa
alert('gracias ' + nombre);
}else{
document.getElementById('mensajes').innerHTML = mensaje;
return false;
}
}
//]]>
<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" /></form>
En el ejemplo señalado se comprueban todos los campos y luego se genera un mensaje.
Luego hacé lo siguiente, descomenta los alert() y el return false; en cada validación, con lo que recibirás los mensajes individualmente y se cancelará el envío.
Espero te haya orientado
Saludos