You can do this more dynamically, without having to create a change event for each element. With only one event change
you can already handle all the elements, just put an equal class in each element you want to be heard by the change. For example, I put the class mask
in each input:
<input type="text" data-label="CNH" class="mascaraCpf mask">
I also added an attribute data-label
which will be the name of the field to display in the error message.
The Mask plugin adds an attribute to each input maxlength
according to the format applied. This way you can automatically know how many characters that field should have, and everything is already automatically in the event change. If fewer characters are entered into the field, you add a div after the field with the error message. If the field was entered correctly, the message is removed, see:
$(document).ready(function() {
$('.mascaraTelefone').mask('(00) 99999-9999');
$('.mascaraCep').mask('99999-999');
$('.mascaraCpf').mask('999.999.999-99');
$('.mascaraCnh').mask('99999999999');
$('.mascaraPlaca').mask ('AAA-9999')
$('.mask').change(function(){
var value = $(this).val();
var maxLen = $(this).attr("maxlength");
// se não existe a div de erro após o elemento, adiciona
if(value.length < maxLen && !$(this).next(".erro").length) {
$(this).after('<div class="erro">O campo '+$(this).data("label")+' deve ter '+maxLen+' caracteres</div>');
}else{
// se já existe, remove
$(this).next(".erro").remove();
}
});
});
.erro{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.12/jquery.mask.min.js"></script>
Telefone:<br>
<input type="text" data-label="Telefone" class="mascaraTelefone mask">
<br>
CEP:<br>
<input type="text" data-label="CEP" class="mascaraCep mask">
<br>
CPF:<br>
<input type="text" data-label="CNH" class="mascaraCpf mask">
Note that I changed the formatting of the phone field of (99)
for (00)
because (do not know the reason, have to read the plugin doc) with (99)
wasn’t working properly.