Skip to main content
4 de 4
título editado
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

Al poner un div mi JavaScript deja de funcionar

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.