Msg error in case of JS typing error

Question

I wanted to insert an error msg, other than in Alert, when the user type less or more than the pre-defined characters in jquery.

$(document).ready(function() {
    $('.mascaraTelefone').mask('(99) 99999-9999');
    $('.mascaraCep').mask('99999-999');
    $('.mascaraCpf').mask('999.999.999-99');
    $('.mascaraCnh').mask('99999999999');
    $('.mascaraPlaca').mask ('AAA-9999')

    $('.mascaraCnh').change(function(){
        var value = $(this).val();
        console.log(value);
        console.log(value.length);
        if(value.length < 10) {
            alert('O campo CNH deve ter 11 caracteres');
        }
    });

});

Answer 1

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.