0

Estou fazendo um validador de senha. Fiz um método para validar se os requisitos de senha não forem atendidos o botão salvar fica desabilitado, se forem atendido o botão habilita, porém não funcionou..

Vejamos.

<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>

Meu método 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 Resposta 1

1

Segundo a documentação do jquery a classe hasClass já retorna true se a classe existir no elemento passado. Logo sua linha:

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

Não necessita do == true, ficando assim

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

E uma outra coisa é que você precisa de uma função keyup também para passar os seus inputs para valid, pois eles são inicialmente invalid e não se tornarão válidos por si só.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .