disabling Jquery keyup button

0

I am 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 button enables, 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 js method:

$("#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);
    }

});
    
asked by anonymous 27.12.2017 / 16:39

1 answer

1

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

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

You do not need == 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 also to pass your inputs to valid, as they are initially invalid and will not become valid by themselves.

    
27.12.2017 / 16:57