O problema
Repare nessa parte:
$('#senha').val().lenght
O nome certo do método é .length
;
Agora é só reformular sua condição:
$('#form').on('submit', function(event) {
event.preventDefault();
senha = $('#senha');
alvo_erro = $('#msg-error');
if (senha.val().length < 4 || senha.val().length > 12) {
alvo_erro.html('<div class="alert alert-danger" role="alert"><i class="fas fa-exclamation-triangle"></i> Sua senha deve ter entre 6 e 12 caracteres!</div>');
} else {
//.....
console.log('Passou na validação!');
alvo_erro.empty();
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div class="styled-input">
<form id="form">
<label style="font-weight: normal" for="senha">Senha:<span style="color: red">*</span></label>
<input type="password" name="Senha" maxlength="12" id="senha">
<input type="submit" name="Submit!">
</form>
</div>
<div id="msg-error"></div>
</body>
</html>
Observações:
- Se o campo estiver vazio, o
.length
vai retornar 0
. Óbvio!
Veja na sua condição: ... $('#senha').val() == "" || $('#senha').val().length < 4 ...
.
No seu código você instancia o input
toda vez que quer buscar o valor dele: $('#senha').val()
. É uma boa prática criar uma variável que recebe a instância (caching). Isso aumenta, relativamente, o desempenho da sua aplicação.
Já que a validação está sendo feita direto no cliente, o HTML tem, também, o atributo minlength
.
Veja:
<input type="password" name="Senha" minlength="4" maxlength="12" required id="senha">
Lembre-se que precisa do required
para assegurar que o input
foi preenchido.
E o aviso fica por conta do navegador (neste exemplo uso o Chrome):

Mas como nem tudo é perfeito, alguns navegadores e o Internet Explorer (ah vá) não são compatíveis. Pode conferir a compatibilidade aqui.