0

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.

4
  • tienes el inicio de tu form dentro de izquierda y el fin de tu form dentro de derecha, eso está raro no se si este sea el problema pero form debiese ser el padre de izquierda y derecha. Dado que tienes la carga de los js al final quizás al "romper" el archivo html con etiquetas mal abiertas o cerradas, quizás puede que esto provoque el que no se carguen los archivos
    – LPZadkiel
    Commented el 28 feb. 2023 a las 20:19
  • ¿Puedes añadir más de tu JS? ¿Qué código es el que llama a la función validarCorreo? Estoy interesado en ver como obtienes el valor de correo que pasas a la función.
    – Jacobo
    Commented el 28 feb. 2023 a las 20:20
  • acabo de borrar el form y sigue igual Commented el 28 feb. 2023 a las 20:20
  • jacobo estodo el codigo js que tengo pero validarCorreo en linea 59. las lineas donde hago todo lo de que me mande un mensaje de si el correo es valido o no son de la linea 57 a 60. Commented el 28 feb. 2023 a las 20:23

1 respuesta 1

1

Básicamente, estás usando dos funciones:

  • onblur="buscar_datos();"
  • onclick="validarCorreo(form.correo.value)"

Eliminé la primera, porque en la consola se puede observar que aparece un error indicando que la función buscar_datos() no está definida.

Si eliminas las etiquetas form, también debes eliminarlo del parámetro en la función validarCorreo(form.correo.value) quedando de esta manera validarCorreo(correo.value). O pudes dejarlo, pero saca las etiquetas form fuera de los div, tal como te mencionó en los comentarios @lpzadquiel

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">
    <form action="registro_usuarios.php" method="POST">
      <div class="izquierda">
        <h4>DATOS DEL USUARIO</h4>
        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" 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>
      </div>
    </form>
  </div>
  <script src="js/script_funciones.js"></script>
  <script src="js/validarco_usuario.js"></script>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.