Validación en javascript que no funciona

Hola, esta es la primera vez que participo con Cristalab pero creo que no será la última vez jaja, mi pregunta es la siguiente, tengo un código hecho en javascript para que no se envíe un formulario vacío... pero no funciona, siempre se envía la forma vacía y no entiendo por qué. Cualquier ayuda será muy agradecida.

el formulario es el siguiente:

Código HTML :

<form onsubmit="return enviar()" action="contacto/envio.php" method="post"  name="formulario" id="formulario">

<table>
<tr><td width="64"><div align="right">Nombre:</div></td><td colspan="2"><input name="nombre" id="nombre" type="text" size="70" maxlength="70" /></td></tr>
<tr><td><div align="right">Correo:</div></td><td><input name="correo" id="correo" type="text" size="70" maxlength="70" /></td></tr>
<tr><td><div align="right">Motivo:</div></td><td colspan="2"><input name="motivo" id="motivo" type="text" size="70" maxlength="70" /></td></tr>
<tr><td><div align="right">Mensaje:</div></td><td colspan="2" rowspan="2"><textarea name="mensaje" cols="65" rows="10" id="mensaje"></textarea></td></tr>
<tr><td><div align="right"></div></td></tr>
<tr><td></td><td width="190"><div align="center"><input name="enviar" id="enviar" type="submit" value="Enviar" onclick="valida_envia()" />
&nbsp;<input name="borrar" id="enviar" type="reset" value="Borrar" /></div>
  </td>
</tr>
</table>

</form>

Y el script que estoy usando en el head, que se supone evita el envio,es el siguiente:

Código Javascript :

<script type="text/javascript" language="javascript">

var vProceder=1;
var vPendientes;
var vCampoNom="";
var vCampoEmail="";
var vCampoMot="";
var vCampoMen="";


function enviar(){

  if(document.formulario.nombre.value==""){
   //document.formulario.nombre.value="¡Escribe tu nombre!";
   vCampoNom="Nombre,";
   vProceder=0; 
   
  }else {
  vCampoNom="";
  vProceder=1;
  }
  if (document.formulario.correo.value==""){
   vCampoEmail=" Correo,";
   vProceder=0;
   }else {
   vCampoEmail="";
   vProceder=1;
   }
   if(document.formulario.motivo.value==""){
   vCampoMot=" Motivo,";
   vProceder=0;
   }else {
   vCampoMot="";
   vProceder=1;
   }
  if(document.formulario.mensaje.value==""){
   vCampoMen=" Mensaje.";
   vProceder=0;
  }else {
  vCampoMen="";
  vProceder=1;
  } 
  
  vPendientes=vCampoNom+vCampoEmail+vCampoMot+vCampoMen;
  if(vProceder){ 
  
  return true;
  
  }else { 
   alert("Por favor llenar: "+vPendientes); 
   return false;
  }
}   


</script>

Simple. No tienes una función que se llame "valida_envia" (onClick del input tipo submit).

DriverOp escribió:

Hola, gracias DriverOp por la rápida respuesta, ya reparé el problema pero resulta que sí queda vacío sale el popup pero se envía después de clickear el aceptar de todas formas...


Pongo el HTML...

Código HTML :

<form onsubmit="return enviar()" action="contacto/envio.php" method="post"  name="formulario" id="formulario">

<table>
<tr><td width="64"><div align="right">Nombre:</div></td><td colspan="2"><input name="nombre" id="nombre" type="text" size="70" maxlength="70" /></td></tr>
<tr><td><div align="right">Correo:</div></td><td><input name="correo" id="correo" type="text" size="70" maxlength="70" /></td></tr>
<tr><td><div align="right">Motivo:</div></td><td colspan="2"><input name="motivo" id="motivo" type="text" size="70" maxlength="70" /></td></tr>
<tr><td><div align="right">Mensaje:</div></td><td colspan="2" rowspan="2"><textarea name="mensaje" cols="65" rows="10" id="mensaje"></textarea></td></tr>
<tr><td><div align="right"></div></td></tr>
<tr><td></td><td width="190"><div align="center"><input name="enviar" id="enviar" type="submit" value="Enviar" onclick="valida_envia()" />
&nbsp;<input name="borrar" id="enviar" type="reset" value="Borrar" /></div>
  </td>
</tr>
</table>

</form>

Pongo el Javascript

Código Java :

<script type="text/javascript" language="javascript">

var vProceder=1;
var vPendientes;
var vCampoNom="";
var vCampoEmail="";
var vCampoMot="";
var vCampoMen="";


function valida_envia(){

  if(document.formulario.nombre.value==""){
   //document.formulario.nombre.value="¡Escribe tu nombre!";
   vCampoNom="Nombre,";
   vProceder=0;
   
  }else {
  vCampoNom="";
  vProceder=1;
  }
  if (document.formulario.correo.value==""){
   vCampoEmail=" Correo,";
   vProceder=0;
   }else {
   vCampoEmail="";
   vProceder=1;
   }
   if(document.formulario.motivo.value==""){
   vCampoMot=" Motivo,";
   vProceder=0;
   }else {
   vCampoMot="";
   vProceder=1;
   }
  if(document.formulario.mensaje.value==""){
   vCampoMen=" Mensaje.";
   vProceder=0;
  }else {
  vCampoMen="";
  vProceder=1;
  } 
  
  vPendientes=vCampoNom+vCampoEmail+vCampoMot+vCampoMen;
  if(vProceder){
  
  return true; 
  
  }else { 
   alert("Por favor llenar: "+vPendientes); 
   return false;
  }
}   


</script>

Aja... pero ahora no tienes una función "enviar" (onSubmit del form).

Comprendes que si declaras un manejador de evento pero no has escrito el desarrollo de ese manejador, el navegador dará error y ejecutará su función interna?. O validas tu formulario al hacer clic en el botón submit o en el evento submit del formulario, pero si haces una de estas cosas, entonces no asignes un manejador de eventos en el otro!.

UUU que fuerte no haberme dado cuenta de eso... esto ya quedó resuelto... muchas gracias DriverOp!!!