Al poner un div
mas específicamente <div class ="izquierda">
, mi código js
deja de funcionar.
Lo que debería de hacer mi función js
es que debería mandar un mensaje de correo valido o invalido al momento de apretar el botón verificar correo(línea de código 60).
También revisé el CSS
y no afecta en nada.
function validarCorreo(correo) {
var expReg = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
var esValido = expReg.test(correo);
if (esValido == true) {
alert('El correo electronico es valido');
} else {
alert('El correo no es valido');
}
}
<body>
<h3 style="text-align: center;"><i class="loti fa-solid fa-user-pen" style="font-size: 25px;"></i> REGISTRO DE USUARIOS</h3>
<div class="tab">
<div class="izquierda">
<h4>DATOS DEL USUARIO</h4>
<form action="registro_usuarios.php" method="POST">
Título:
<select id="titulo" name="titulo" class="form-select" required>
<option value="" selected disabled hidden>Seleccione una opción</option>
<option>Lic.</option>
<option>Ing.</option>
<option>Dr.</option>
<option>Dra.</option>
<option>Sr.</option>
<option>Sra.</option>
</select>
Nombre completo:
<input id="nombre" name="nombre" type="text" class="form-control" placeholder="Ingrese nombre" required> Fecha de nacimiento:
<input id="fecha_nacimiento" name="fecha_nacimiento" type="date" class="form-control" required> Sexo:
<select name="sexo" id="sexo" class="form-select" required>
<option value="" selected disabled hidden>Seleccione una opción</option>
<option>Hombre</option>
<option>Mujer</option>
</select>
Teléfono:
<input id="telefono" name="telefono" type="tel" class="form-control" placeholder="2741227113" required>
</div>
<div class="vl"></div>
<div class="derecha">
<h4>USUARIO Y CONTRASEÑA</h4>
Correo:
<div class="input-group mb-3">
<input type="email" name="correo" id="correo" class="form-control" placeholder="Ingrese un correo" onblur="buscar_datos();" autocomplete="off">
<button class="btn btn-success" type="button" id="button-addon2" value="validar Correo" onclick="validarCorreo(form.correo.value)">Verificar Correo</button>
</div>
Contraseña:
<input name="password" id="password" type="password" class="form-control" placeholder="Ingrese al menos 8 caracteres" required> Confirmar contraseña:
<input name="conf_password" id="conf_password" type="password" class="form-control" placeholder="Repita la contraseña" required> Puesto de trabajo:
<select name="area_trabajo" id="area_trabajo" class="form-select" required>
<option value="" selected disabled hidden>Seleccione el área</option>
<option>Administración</option>
<option>Admisión</option>
<option>Archivo</option>
<option>Contabilidad</option>
</select>
</form>
</div>
</div>
<script src="js/script_funciones.js"></script>
<script src="js/validarco_usuario.js"></script>
</body>
Mi js
se llama validarco_usuario.js y esto es lo que contiene, es solo para que me me valide que los usuarios estén poniendo un correo que sea valido, este código se usa en el <div="derecho">
pero no entiendo porque al momento de que yo pongo el <div="izquierda">
de alguna manera afecta a el lado derecho haciendo que no llegue el js
.
validarCorreo
? Estoy interesado en ver como obtienes el valor decorreo
que pasas a la función.