¿Por que mi función no ejecuta el primer if en mi validación en Javascript? tengo este problema con mi código en javascript que si entra la función pero no las condiciones por lo tanto no entra la evaluación de los datos y envia los datos aun que los campos estes vacíos. No tengo idea cual es el error. Les dejo mi código html y mi javascript ojalá me puedan ayudar saludos.
Este es mi codigo js
function vale() {
alert("Entra la Fucncion");
var nombre, apellidos, correo, password, cofpassword, telefono, celular, expression, calle, colonia, ciudad, estado, cp, terminos;
nombre = document.getElementById("nombre").value;
apellidos = document.getElementById("apelli").value;
correo = document.getElementById("correo").value;
password = document.getElementById("contra").value;
cofpassword = document.getElementById("confcont").value;
telefono = document.getElementById("telf").value;
celular = document.getElementById("celu").value;
calle = document.getElementById("calle").value;
colonia = document.getElementById("colonia").value;
ciudad = document.getElementById("ciudad").value;
estado = document.getElementById("estado").value;
cp = document.getElementById("cp").value;
terminos = document.getElementById("terminos").checked;
expression = /\w+@\w+\.+[a-z]/;
alert("Entra la Fucncion");
if (nombre == "" || apellidos == "" || correo == "" || password == "" || cofpassword == "" || telefono == "" || celular == "" || calle == "" || colonia == "" || ciudad == "" || estado == "" || cp == "") {
alert("Todos los campos son obligatorios");
return false;
} else if (nombre.length > 30) {
alert("El nombre es muy largo");
return false;
} else if (apellidos.length > 80) {
alert("Los apellidos son muy largos");
return false;
} else if (correo.length > 100) {
alert("El correo es muy largo");
return false;
} else if (!expression.test(correo)) {
alert("El correo no es valido");
return false;
} else if (password.length > 20 || cofpassword.length > 20) {
alert("La contraseña es muy larga");
return false;
} else if (password != cofpassword) {
alert("La contraseña no coincide");
return false;
} else if (telefono.length > 10 || celular.length > 10) {
alert("Los numeros de telefono o celular son debe ser de 10 digitos");
return false;
} else if (isNaN(telefono)) {
alert("El telefono no es un numero");
return false;
} else if (isNaN(celular)) {
alert("El celular no es un numero");
return false;
} else if (calle.length > 100) {
alert("La calle es muy larga");
return false;
} else if (colonia.length > 50) {
alert("La colonia es muy larga");
return false;
} else if (ciudad.length > 50) {
alert("La ciudad es muy larga");
return false;
} else if (estado.length > 50) {
alert("La estado es muy larga");
return false;
} else if (isNaN(cp)) {
alert("El CP debe ser un numero");
return false;
} else if (terminos == false) {
alert("Deve de Aceptar los terminos y Condiciones");
return false;
} else {
return true;
}
}
este es mi codigo html
<!DOCTYPE html>
<html>
<head>
<title>Registro</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/header.css">
<link rel="stylesheet" type="text/css" href="../css/estilos.css">
<script src="validar.js"></script>
</head>
<body>
<header>
<div class="Contenedor">
<div class="fondo">
<a href="../index.html"><img src="../Img/UembekuaLogo.png" id="Logo" alt="Logo Uembekua" onsubmit="return vale()"></a>
</div>
<nav>
<ul class="nav">
<li><a href="../index.html">Home</a></li>
<li><a href="Servicios.html">Servicios</a>
<ul class="Submenu">
<li><a href="Paquetes.html">Paquetes</a></li>
<li><a href="Cursos.html">Cursos</a></li>
<li><a href="Vacaciones.html">Vacaciones</a></li>
<li><a href="Masajes.html">Masajes</a></li>
<li><a href="Precios.html">Precios</a></li>
<li><a href="Reservacion.html">Reserva tu Servicio</a></li>
</ul>
</li>
<li><a href="Conocenos.html">Conocenos</a></li>
<li><a href="Instalaciones.html">Instalaciones</a></li>
<li><a href="Informacion.html">Info</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section>
<form style="padding: 20px; margin-top: 20px" method="post" action="reg.php" onsubmit=" return vale()">
<font style="font-family: Rockwell;">
<center>
<table align="Center" cellpadding="5px" cellspacing="5px">
<tr>
<td align="center" colspan="3">
<h2>Crear cuenta</h2><br>
</td>
</tr>
<tr>
<td>Nombre:</td>
<td colspan="2"><input type="text" placeholder="Nombre" id="nombre" name="nombre"><br></td>
</tr>
<tr>
<td>Apellidos: </td>
<td colspan="2"><input type="text" placeholder="Apellidos" id="apelli" name="apelli"><br></td>
</tr>
<tr>
<td>Correo:</td>
<td colspan="2"><input type="email" placeholder="example@correo.com" id="correo" name="correo"><br></td>
</tr>
<tr>
<td>Contraseña:</td>
<td colspan="2"><input type="password" placeholder="Contaseña" id="contra" name="contra"><br></td>
</tr>
<tr>
<td>Confirmar contraseña:</td>
<td colspan="2"><input type="password" placeholder="Contaseña" id="confcont"><br></td>
</tr>
<tr>
<td>Teléfono:</td>
<td colspan="2"><input type="text" placeholder="Tu teléfono" id="telf" name="telf"><br></td>
</tr>
<tr>
<td>Celular:</td>
<td colspan="2"><input type="text" placeholder="Tu celular" id="celu" name="celu"><br></td>
</tr>
<tr>
<td>Calle#:</td>
<td colspan="2"><input type="text" placeholder="Tu Calle#" id="calle" name="calle"><br></td>
</tr>
</tr>
<tr>
<td>Colonia:</td>
<td colspan="2"><input type="text" placeholder="Tu colonia" id="colonia" name="colonia"><br></td>
</tr>
</tr>
<tr>
<td>Ciudad:</td>
<td colspan="2"><input type="text" placeholder="Ciudad" id="ciudad" name="ciudad"><br></td>
</tr>
<tr>
<td>Estado:</td>
<td colspan="2"><input type="text" placeholder="Estado" id="estado" name="estado"><br></td>
</tr>
<tr>
<td>CP:</td>
<td colspan="2"><input type="text" placeholder="CP" id="cp" name="cp"><br></td>
</tr>
<tr cellpadding="5" align="center">
<td colspan="2"><input type="checkbox" name="terminos"><a href="https://www.timeinc.net/subs/privacy/termsofservice/pptos.html">Terminos y Condiciones</a></td>
</tr>
<tr cellpadding="5" align="center">
<td colspan="2"><input type="submit" id="save" value="Registrarse"></td>
</tr>
</table>
</center>
</font>
</form>
<center>
<a href="Reservacion.html"><input type="submit" name="cancel" value="Cancelar"></a>
</center>
</section>
</main>
<footer>
<p align="center" id="copyright">Uémbekua — Todos los derechos reservados © </p>
<a href="#"><img src="../Img/facebook1.png" id="img1"></a>
<a href="#"><img src="../Img/instagram1.png" id="img2"></a>
</footer>
</body>
</html>