Disable a button if (length < x)

  button, html, javascript

good evening.
I’m a beginner with JavaScript and I’m trying to recreate a specific webpage. There, exists a button that, if the login form doesn’t have at least 11 elements on user and 8 on password, the button is disabled.
How can I do this with HTML and 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>

Thanks for the help!

Source: Ask Javascript Questions

LEAVE A COMMENT