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

Al poner un div mi javascripJavaScript deja de funcionar

Se da formato para mejorar la visualización.
Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

Al poner un divdiv mas especificamente <div class ="izquierda" mi codigo js deja de funcionarespecíficamente <div class ="izquierda">, solomi código js deja de funcionar si le pongo ese div. lo

Lo que deberiadebería de hacer mi funcion jsfunción js es que deberiadebería mandar un mensaje de correo valido o invalido al momento de apretarapretar el boton verificar correobotón verificar correo(linealínea de codigocódigo 60) pero no se porque me afecta mi div izquierda a mi codigo js, tambien revise.

También revisé el CSSCSS y eso no afectoafecta en nada.

    <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>

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 jsMi js se llama validarco_usuario.jsvalidarco_usuario.js y esto es lo que contiene, es solo para que me me valide que los usuarios estenestén poniendo un correo que sea valido, este codigocódigo se usa en el <div="derecho"><div="derecho"> pero no entiendo porque al momento de que yo pongo el <div="izquierda"><div="izquierda"> de alguna manera afecta a el lado derecho haciendo que no llegue el jsjs.

    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');
    }
}

Al poner un div mas especificamente <div class ="izquierda" mi codigo js deja de funcionar, solo deja de funcionar si le pongo ese div. lo que deberia de hacer mi funcion js es que deberia mandar un mensaje de correo valido o invalido al momento de apretar el boton verificar correo(linea de codigo 60) pero no se porque me afecta mi div izquierda a mi codigo js, tambien revise el CSS y eso no afecto en nada.

    <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 esten poniendo un correo sea valido, este codigo 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.

    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');
    }
}

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.

se eliminó 1 carácter en el cuerpo
Origen Enlace

Al poner un div mas especificamente mi<div class ="izquierda" mi codigo js deja de funcionar, solo deja de funcionar si le pongo ese div. lo que deberia de hacer mi funcion js es que deberia mandar un mensaje de correo valido o invalido al momento de apretar el boton verificar correo(linea de codigo 60) pero no se porque me afecta mi div izquierda a mi codigo js, tambien revise el CSS y eso no afecto en nada.

Al poner un div mas especificamente mi codigo js deja de funcionar, solo deja de funcionar si le pongo ese div. lo que deberia de hacer mi funcion js es que deberia mandar un mensaje de correo valido o invalido al momento de apretar el boton verificar correo(linea de codigo 60) pero no se porque me afecta mi div izquierda a mi codigo js, tambien revise el CSS y eso no afecto en nada.

Al poner un div mas especificamente <div class ="izquierda" mi codigo js deja de funcionar, solo deja de funcionar si le pongo ese div. lo que deberia de hacer mi funcion js es que deberia mandar un mensaje de correo valido o invalido al momento de apretar el boton verificar correo(linea de codigo 60) pero no se porque me afecta mi div izquierda a mi codigo js, tambien revise el CSS y eso no afecto en nada.

Origen Enlace
Loading