Buenas noches. Soy un principiante con JavaScript y estoy tratando de recrear una página web específica. Allí, existe un botón que, si el formulario de inicio de sesión no tiene al menos 11 elementos en el usuario y 8 en la contraseña, el botón está deshabilitado. ¿Cómo puedo hacer esto con HTML y JS?

function blockButtonByUser(){
    var cpfleng = document.getElementById('.iptuser').length
    console.log(cpfleng)
    var btnsubmit = document.getElementById('.btnsubmit')
    if (cpfleng < 11) {
        btnsubmit.disabled = true;
    } else{
        btnsubmit.disabled = false;
    }
}

function blockButtonByPassword(){
    var passwordlength = document.getElementById('.iptpassword').length
    console.log(cpfleng)
    var btnsubmit = document.getElementById('.btnsubmit')
    if (passwordlength < 8) {
        btnsubmit.disabled = true;
    } else{
        btnsubmit.disabled = false;
    }
}
<header><img src="assets/white.svg" alt="logo nubank" height="80px"></header>
<div class="container">
    <h2>Faça seu login</h2>
    <div class="form">
        <div class="user">
            <label for="cpf" class='lbluser'>CPF</label>
            <input type="text" name="cpf" id="cpf" class='iptuser'>
            <div class="underline"></div>
        </div>
        <div class="password">
            <label for="password" class='lblpassword'>Senha</label>
            <input type="password" name="password" id="password" class='iptpassword'>
            <div class="underline"></div>
        </div>
        <input type="submit" value="CONTINUAR" class='btnsubmit'>
    </div>
    <div class="footer">
        <div class="esqueci">
            <a href="links/forgot.html">Esqueci minha senha ></a>
        </div>
        <div class="naocliente">
            <a href="#">Ainda não sou cliente ></a>
        </div>
    </div>
</div>
<script src="main.js"></script>

¡Gracias por la ayuda!

0
Hugo Folloni 8 may. 2021 a las 01:57

3 respuestas

La mejor respuesta

Aquí hay algo así usando un eventListener:

var cpfOkay = false
var passwordOkay = false;
var btnsubmit = document.getElementsByClassName('btnsubmit')[0];

document.getElementById('cpf').addEventListener('input', function(){

  btnsubmit = document.getElementsByClassName('btnsubmit')[0];
      cpfOkay = false;
    if (event.target.value.length >= 11) {
        cpfOkay = true;
    }
    checkBoth();
})

document.getElementById('password').addEventListener('input', function(){

  btnsubmit = document.getElementsByClassName('btnsubmit')[0];
    passwordOkay = false;

    if (event.target.value.length >= 8) {
        passwordOkay = true;
    }

    checkBoth();
})

function checkBoth() {
      btnsubmit.disabled = true;
      btnsubmit.style.opacity = 0.5;

  if (cpfOkay && passwordOkay) { 
    btnsubmit.disabled = false;
        btnsubmit.style.opacity = 1;
  } 
}
<header><img src="https://placekitten.com/200/300" alt="logo nubank" height="80px"></header>
<div class="container">
    <h2>Faça seu login</h2>
    <div class="form">
        <div class="user">
            <label for="cpf" class='lbluser'>CPF</label>
            <input type="text" name="cpf" id="cpf" class='iptuser'>
            <div class="underline"></div>
        </div>
        <div class="password">
            <label for="password" class='lblpassword'>Senha</label>
            <input type="password" name="password" id="password" class='iptpassword'>
            <div class="underline"></div>
        </div>
        <input type="submit" value="CONTINUAR" class='btnsubmit' disabled style="opacity:0.5">
    </div>
    <div class="footer">
        <div class="esqueci">
            <a href="links/forgot.html">Esqueci minha senha ></a>
        </div>
        <div class="naocliente">
            <a href="#">Ainda não sou cliente ></a>
        </div>
    </div>
</div>
1
Prosy Arceno 7 may. 2021 a las 23:24

Puede agregar detectores de eventos para el evento input tanto para user como para password y, según los requisitos, puede habilitar o deshabilitar el botón. Puede refactorizar su código de esta manera:

var cpf = document.getElementById('cpf')
var password = document.getElementById('password')
var btnsubmit = document.getElementById('btnsubmit')

cpf.addEventListener('input', function (evt) {
    if(cpf.value.length < 11 || password.value.length < 8){
    btnsubmit.disabled = true;
  } else {
    btnsubmit.disabled = false;
  }
});

password.addEventListener('input', function (evt) {
    if(cpf.value.length < 11 || password.value.length < 8){
    btnsubmit.disabled = true;
  } else {
    btnsubmit.disabled = false;
  }
});
<header><img src="assets/white.svg" alt="logo nubank" height="80px"></header>
<div class="container">
    <h2>Faça seu login</h2>
    <div class="form">
        <div class="user">
            <label for="cpf" class='lbluser'>CPF</label>
            <input type="text" name="cpf" id="cpf" class='iptuser'>
            <div class="underline"></div>
        </div>
        <div class="password">
            <label for="password" class='lblpassword'>Senha</label>
            <input type="password" name="password" id="password" class='iptpassword'>
            <div class="underline"></div>
        </div>
        <input type="submit" value="CONTINUAR" class='btnsubmit' id='btnsubmit' disabled>
    </div>
    <div class="footer">
        <div class="esqueci">
            <a href="links/forgot.html">Esqueci minha senha ></a>
        </div>
        <div class="naocliente">
            <a href="#">Ainda não sou cliente ></a>
        </div>
    </div>
</div>
<script src="main.js"></script>
1
Nenad Milosavljevic 7 may. 2021 a las 23:12

Tienes algunos problemas. Uno fue getElementById en las clases. Uno no era un controlador de eventos. Por último, intentaba obtener la longitud del elemento, pero no la longitud del valor.

Esto debería funcionar:

document.querySelector('.btnsubmit').addEventListener('click', e =>{
    blockButtonByUser();
    blockButtonByPassword()
})

function blockButtonByUser(){
    var cpfleng = document.querySelector('.iptuser').value.length
    console.log(cpfleng)
    var btnsubmit = document.querySelector('.btnsubmit')
    if (cpfleng < 11) {
        btnsubmit.disabled = true;
    } else{
        btnsubmit.disabled = false;
    }
}

function blockButtonByPassword(){
    var passwordlength = document.querySelector('.iptpassword').value.length
    console.log(passwordlength)
    var btnsubmit = document.querySelector('.btnsubmit')
    if (passwordlength < 8) {
        btnsubmit.disabled = true;
    } else{
        btnsubmit.disabled = false;
    }
}


1
akabin 7 may. 2021 a las 23:20