Formulario se envia sin validar

[kaman10]

Gente del foro: tengo un problema que se envia el formulario con los campos vacios mostrando los errores.
Les paso el codigo:

Código:

<script type="text/javascript">
function validar(){
var error=false;
//valido el nombre
if (document.getElementById('nombre').value.length==0){
	document.getElementById('errorNombre').style.display='block';//muestro mensaje de error
	error= true;
	}else{ 
	document.getElementById('errorNombre').style.display='none';//oculto mensaje de error
    return false
	}

//valido el email
//campo vacio
if (document.getElementById("email").value.length==0){
    document.getElementById("errorEmail").style.display='block';//muestro mensaje de error	
	error= true;
	}else{ 
	document.getElementById("errorEmail").style.display='none';//oculto mensaje de error
    return false
	} 
//valido expresion	
	var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/
if (!expreg.test(document.getElementById("email").value)) {
	document.getElementById("errorEmail").style.display='block';
	error= true;
	}else{ 
	document.getElementById("errorEmail").style.display='none';
    return false
	}
	
//el formulario fue validado y se envia
	alert("Gracias, el formulario ha sido completado correctamente y será enviado.");
	document.formulario.submit();
	} 	
</script>

Este es el formulario:

Código HTML:

<form id="formulario" onSubmit="!return validar()" action="validacion_js.html">
<table>
<thead></thead>
<tbody>

<tr>
<td>Nombre:</td>
<td>
<input type="text" id="nombre" />
</td>
<td>
<span id="errorNombre" style="display:none;color:red;" >
El campo es obligatorio
</span>
</td>
</tr>

<tr>
<td>Correo:</td>
<td>
<input type="text" id="email" />
</td>
<td>
<span id="errorEmail" style="display:none;color:red;">
El campo es obligatorio y debe estar correctamente escrito
</span>
</td>
</tr>

<tr>
<td>
<button id="enviar" onclick="validar()">Enviar</button>
</td>
</tr>

</tbody>
</table>
</form> 

espero que me puedan ayudar.
Saludos