0

Buenas tardes intento desarrollar un login con ciertas funciones en JavaScript que me permita hacer lo siguiente:

Que al llenar el primer Input con un longitud de 7 caracteres se active el segundo Input y se le remueva el Style="background: grey;" y al llenar el segundo Input con una longitud de 7 caracteres se active el boton de Enviar y se le remueva de su clase (class="btn disabled") el atributo (disabled) y el parametro disabled.

Encontre un codigo para guiarme mas o menos, he realizado algunas modificaciones en su función pero no me da resultados.

<script type="text/javascript">

    function activarBoton() {
      if (verificar2()) {
        btnEnviar.disabled = false
      } else {
        btnEnviar.disabled = true
      }
    }

    function verificar2() {
      if (caja2.value.length<=7)
        return true;
      return false;
    }

    function activarInput() {
      if (verificar()) {
        caja2.disabled = false
      } else {
        caja2.disabled = true
      }
    }

    function verificar() {
      if (caja1.value.length<=7)
        return false;
      return true;
    }

    var btnEnviar = document.getElementById("btnEnviar");
    btnEnviar.disabled = true;
    var caja1 = document.fr.caja1;
    var caja2 = document.fr.caja2;
        caja2.disabled = true;
    caja1.onkeyup = caja2.onkeyup = activarBoton;
  </script>
<form name="fr">
    <input type="text" name="caja1" />
    <input type="text" name="caja2" style="background: grey;"/>
    <button id="btnEnviar" class="btn disabled" type="submit" disabled>enviar</button>
  </form>

3 respuestas 3

1

Primero te recomiendo que tomes tus inputs, asignándoles un id, o una clase, como mejor te convenga dependiendo de lo que necesites, una vez tomados estos valores, mandas llamar el onKeyUp pero desde el html, mandandole como parámetro el valor del input que tiene el llamado onKeyUp(this.value), tu función verificar y verificar2 recibirán ese parámetro y en base a eso tomas el tamaño de ese value y lo comparas.

Cuando el tamaño del valor de tus inputs sea igual a 7, se cumplirán tus condiciones, mientras tanto no.

var btnEnviar = document.getElementById("btnEnviar");
var caja1 = document.getElementById("caja1");
var caja2 = document.getElementById("caja2");

btnEnviar.disabled = true;
caja2.disabled = true;

function verificar2(valor) {
  if (caja2.value.length===7){
    btnEnviar.disabled = false;
    btnEnviar.classList.remove("disabled");
  } else {
      btnEnviar.disabled = true;
  }
}

function verificar(valor) {
  if (valor.length===7){
  	caja2.style.background = "#FFFFFF";
    caja2.disabled = false
  } else {
    caja2.style.background = "grey";
    caja2.disabled = true;
    caja2.value = "";
    btnEnviar.disabled = true;
  }
   
}
<form name="fr">
    <input id="caja1" type="text" name="caja1" onkeyup="verificar(this.value);" />
    <input id="caja2" type="text" name="caja2" style="background: grey;" onkeyup="verificar2(this.value);"/>
    <button id="btnEnviar" class="btn disabled" type="submit" disabled>enviar</button>
  </form>

Espero y sea lo que necesitas.

4
  • Gracias, he intentado compilar el script pero aparentemente hay un problema, el input2 se mantiene activo y el botón al cumplirse la condición no se desactiva
    – Kn4
    Commented el 3 may. 2019 a las 1:25
  • Edité mi respuesta, espero haber entendido lo que necesitas, ahora las condiciones cambiaron un poco, cuando el input1.length = 7, se activa el input2 y si el input2.length = 7 se activa el botón, pero si el valor del input1 < 7 todo se desactiva. Commented el 3 may. 2019 a las 14:32
  • btnEnviar.disabled = true; Esta linea en el codigo arroja el siguiente error: Uncaught TypeError: Cannot set property 'disabled' of null at login.html:7
    – Kn4
    Commented el 4 may. 2019 a las 5:25
  • Es muy extraño porque ya lo probé y si funciona, en tu codigo tienes creado el boton con el id btnEnviar? Porque el error que te da es que no esta definido el boton. Commented el 4 may. 2019 a las 6:37
0

Deberías agregarle un id a tus inputs para que puedas seleccionarlos con JS o jQuery, después de esto, te recomiendo utilices listener's para que no agregues funciones JS en tu HTML de forma lineal, usando la función keyup al momento de que el usuario pulse 7 veces o inserte 7 caracteres se hará la validación y pondrá deshabilitado el input, si solo le pones un estilo de background-colorno le impide al usuario escribir en el otro input así que ponle igualmente disabled, cuando reste o agregue otro más se volverá a poner disabled y así con el segundo input yo le quito el atributo con removeAttribute() pero hay otras funciones, utiliza la que más te convenga, cualquier duda hazla saber. :D

var caja1 = document.getElementById('caja1');
var caja2 = document.getElementById('caja2');
var btn = document.getElementById('btnEnviar');

caja1.addEventListener('keyup', function(){
   
    
    if(this.value.length === 7){
      
        console.log('admitido');
        caja2.disabled = false;
        caja2.style.background = 'white';
        
          caja2.addEventListener('keyup',function(){
          
            if(this.value.length === 7){
      
        console.log('admitido');
        btn.disabled = false;
        btn.removeAttribute('class', 'btn disabled');
        
          }else{
           btn.disabled = true;
        btn.setAttribute('class', 'btn disabled');
        
          
          }
          });
        
        
    }else{
    
      console.log('no admitido');
      caja2.disabled = true;
      caja2.value = '';
      caja2.style.background = 'grey';
      
    }


})
<input type="text" id="caja1" name="caja1">
<input type="text" id="caja2" name="caja2" disabled style="background: grey;">
<button id="btnEnviar" class="btn disabled" type="submit" disabled>enviar</button>

3
  • Gracias Vicky por responder, he probado ell Script pero me pasa lo mismo que al.resto, no compila, es extraño.
    – Kn4
    Commented el 3 may. 2019 a las 1:27
  • Qué raro que no funcione, aquí si lo hace, te manda algún mensaje de error, puedes verificar en consola oprimiendo f12. Commented el 3 may. 2019 a las 3:18
  • Este es el siguiente error: login.html:7 Uncaught TypeError: Cannot read property 'addEventListener' of null " caja1.addEventListener('keyup', function(){ "
    – Kn4
    Commented el 4 may. 2019 a las 5:20
0

te propongo esta solución, espero te ayude en algo, en los comentarios del código trato de explicarte lo que hace, buena suerte!

//**Funcionalidad para el input1**
$('input[name=caja1]').on('keyup', () => {

  //Obtenemos el valor
  var input1 = $('.input1').val();

  //Validamos que el valor sea mayor a 7
  if (input1.length > 7) { 
    //Habilitamos el input2 y quitamos el color gris
    $('input[name=caja2]').removeAttr('style').removeAttr('disabled');
  } 
  else {
    //Adicionamos nuevamente el color gris y la propiedad 'disabled' al input2
    $('input[name=caja2]').css('background', 'grey').prop('disabled', true);

    //También bloqueamos el botón
    $('#btnEnviar').addClass('disabled').prop('disabled', true);
  }
});


//**Funcionalidad para el input2**
$('input[name=caja2]').on('keyup', () => {

  //Obtenemos el valor
  var input2 = $('.input2').val();

  //Validamos que el valor sea mayor a 7 caracteres
  if (input2.length > 7) {
    //Habiiltamos el botón quitando la clase 'disabled' y la propiedad 'disabled'
   $('#btnEnviar').removeClass('disabled').removeAttr('disabled');
  } 
  else {
    //Volvemos a deshabilitar el botón, adicionando nuevamente la clase y propiedad 'disabled'
    $('#btnEnviar').addClass('disabled').prop('disabled', true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="fr">
  <input type="text" name="caja1" class="input1" />
  <input type="text" name="caja2" class="input2" style="background: grey;" disabled />
  <button id="btnEnviar" class="btn disabled" type="submit" disabled>enviar</button>
</form>

4
  • Gracias por tu aporte, para ser honesto quería hacerlo sin JQuery y aunque lo compile no responde bien, al cumplir la condición el input 2 no se desactiva, he modificado la variable en la longitud y nada
    – Kn4
    Commented el 3 may. 2019 a las 1:26
  • Veehh.. Rarísimo, de hecho lo probé de diferentes formas y corre perfectamente, pues el flujo normal como está ahora, es que al escribir 8 caracteres, se activan las funcionalidades, habilitando y deshabiltando elementos(input2-botón), y si no logra los 8 caracteres en ambos inputs, vuelve a deshabilitar elementos. Commented el 3 may. 2019 a las 13:23
  • El problema es que cuando lo compilo en js.do me dice el siguiente error> "JavaScript error: Uncaught ReferenceError: $ is not defined on line 3" y la linea tres es la siguiente> $('input[name=caja1]').on('keyup', () => { / Pero en el compilador del foro me corre perfectamente. Saludos
    – Kn4
    Commented el 4 may. 2019 a las 5:04
  • Ya corregí el problemas, gracias, solucionado. El problema era el orden el cual puse el script. Saludos es.stackoverflow.com/questions/243536/…
    – Kn4
    Commented el 4 may. 2019 a las 5:30

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.