Hola a todos!
Tengo un lio monumental que no me aclaro donde tengo la mano izquierda de la redecha
Estoy haciendo un formulario de contacto en html e intento validar los campos en js, y empiezan los problemas.
El boton de envio es de tipo "button", para luego con js si todos los campos estan correctos haga un "submit".
Bueno, todo iba bien hasta que le he asignado la funcion submit, solo verifica un campo y luego directamente envia el formulario!!
Este es el código js de validación:
Código:
function validar() {
var verificar = true;
var expRegEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
if (!document.getElementById("nombre").value) {
alert("El campo nombre es requerido");
document.getElementById("nombre").focus();
verificar=false;
} else if (!document.getElementById("apellidos").value) {
alert("El campo apellidos es requerido");
document.getElementById("apellidos").focus();
verificar=false;
} else if (!expRegEmail.exec(document.getElementById("email")).value) {
alert("El campo email es requerido");
document.getElementById("email").focus();
verificar=false;
} else if (!document.getElementById("asunto").value) {
alert("El campo asunto es requerido");
document.getElementById("asunto").focus();
verificar=false;
} else if (!document.getElementById("comentarios").value) {
alert("El campo comentarios es requerido");
document.getElementById("comentarios").focus();
verificar=false;
}
if(validar) {
document.formulario_frm.submit();
}
}
window.onload = function() {
document.getElementById("enviar").onclick = validar;
}
Código:
<form name="formulario_frm" action="enviar.php" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<legend>Envíanos tus comentarios</legend>
<div>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre_txt" required />
</div>
<div>
<label for="apellidos">Apellidos:</label>
<input type="text" id="apellidos" name="apellidos_txt" required />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email_txt" required />
</div>
<div>
<label for="asunto">Asunto:</label>
<input type="text" id="asunto" name="asunto_txt" required />
</div>
<div>
<label for="comentarios">Comentarios:</label>
<textarea id="comentarios" name="comentarios_txa" cols="31" rows="5" required ></textarea>
</div>
<div>
<input type="button" id="enviar" name="enviar_btn" value="Enviar" />
</div>
</fieldset>
</form>
Hago la prueba de enviar con los campos vacíos para que salte el js dando la alerta, hasta aquí todo bien, da la primera alerta del campo nombre, cuando aceptas la alerta y el foco va al campo en cuestión...Zas!! lo envía!!
No entiendo porque, creo haber repasado todo, y en teoría debería de funcionar.
Alguien puede echarme una mano, por favor!! ^_^
No llego a entender porque envía el formulario cuando no se ha rellenado nada.
Muchas gracias.