disabling Jquery keyup button

Asked

Viewed 71 times

0

I’m making a password validator. I made a method to validate if the password requirements are not met the save button is disabled, if they are answered the enabled button, but it did not work..

Let’s see.

<form novalidate="novalidate" name="frmUsuario" id="formCadastro" role="form">
    <div class="row">
        <div>
            <div class="form-group col-md-3">
                <div class="form-group"  style="height: 200px;">
                    <input class="hide" type='file' id="inputFile" onchange="readURL(this);" />
                    <img title="Clique para alterar a imagem"  id="imagemUsuario" class="img-responsive img-circle" src="{{usuario.fotoUsuario}}"  style="width: 180px;" ng-model="usuario.fotoUsuario"  onerror="this.src='./imagem/imgNaoDisponivel.jpg'" />
                </div>
            </div>                              
        </div>

        <div class="form-group col-md-4">
            <label>Login:</label> <input maxlength="20" disabled="disabled" type="text" class="form-control" ng-model="usuario.login" />
        </div>
        <div class="form-group col-md-4">
            <label>Nome:</label> <input maxlength="30" type="text" class="form-control" ng-model="usuario.nome" />
        </div>
        <div class="form-group col-md-4">
            <label>E-mail:</label> <input maxlength="100"  type="email" class="form-control" ng-model="usuario.email" />
        </div>                          
        <div class="form-group col-md-4">
            <label>Senha:</label> <input  id="inpSenha" required="required"  type="password" min="1" class="form-control" ng-model="usuario.senha"  />
        </div>

    </div>

    <div class="col-md-4">
        <div class="aro-pswd_info">
            <div id="pswd_info">
                <h4>Sua senha deve conter</h4>
                <ul>
                    <li id="letter" class="invalid">Possuir <strong>uma letra</strong></li>
                    <li id="capital" class="invalid">Deve ter <strong>Letra MAIUSCULA</strong></li>
                    <li id="number" class="invalid">Possuir <strong>um Número</strong></li>
                    <li id="length" class="invalid">Deve conter <strong>8 Caracteres</strong></li>
                    <li id="space" class="invalid">dificultar<strong> <!-- use [~,!,@,#,$,%,^,&,*,-,=,.,;,'] --></strong></li>
                </ul>
            </div>
        </div>
    </div> 

</form>

<button style="background-color: #b51e27;  color: white;" type="button" class="btn btn-default btnSalvar"  data-dismiss="modal" ng-click="salvarUsuario()">Salvar</button>

My method js:

$("#inpSenha").keyup(function(){

    if( $('#letter').hasClass('valid') && $('#capital').hasClass('valid') && $('#number').hasClass('valid') && $('#space').hasClass('valid') == true ){
        $('btnSalvar').prop('disable', false);
    }
    else{
        $('btnSalvar').prop('disable', true);
    }

});

1 answer

1


According to the jquery documentation the class hasClass already returns true if the class exists in the last element. Then its line:

if( $('#letter').hasClass('valid') && $('#capital').hasClass('valid') && $('#number').hasClass('valid') && $('#space').hasClass('valid') == true ){

Does not require == true, so

if( $('#letter').hasClass('valid') && $('#capital').hasClass('valid') && $('#number').hasClass('valid') && $('#space').hasClass('valid') ){

And another thing is that you need a keyup function as well to pass your inputs to Valid, as they are initially invalid and will not become valid by themselves.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.