0

Sou novato ainda, achei este javascript que verifica se o CPF é verdadeiro ou falso (já com pontos e traço), se o resultado der false ele deixa a borda do input amarela, mas eu gostaria além dele deixar a barra amarela que aparecesse um texto embaixo do input dizendo "Por favor, digite um CPF válido."

Esse é o script:

$(document).ready(function () {
            $('#cpf').cpfcnpj({
                mask: true,
                validate: 'cpf',
                event: 'click',
                handler: '.btn-lg',
                ifValid: function (input) {
                    input.removeClass("error");
                },
                ifInvalid: function (input) {
                    input.addClass("error");
                }
            });
        });

Criei uma DIV:

<div class="error">
                        Por favor, digite um CPF válido.
                    </div> 

como eu faço para essa DIV ficar oculta, e só aparecer abaixo do input quando o resultado da função for false??

/*============FUNCAO Q VALIDA CPF==============*/
(function(e) {
    function n(e) {
        if (e.match(/^\d{2}\.\d{3}\.\d{3}\/\d{4}\-\d{2}$/) != null) {
            var t = e.substring(0, 2);
            var n = e.substring(3, 6);
            var r = e.substring(7, 10);
            var i = e.substring(11, 15);
            var o = e.substring(16, 18);
            var u;
            var a;
            var f = true;
            a = t + n + r + i + o;
            s = a;
            c = s.substr(0, 12);
            var l = s.substr(12, 2);
            var h = 0;
            for (u = 0; u < 12; u++) h += c.charAt(11 - u) * (2 + u % 8);
            if (h == 0) f = false;
            h = 11 - h % 11;
            if (h > 9) h = 0;
            if (l.charAt(0) != h) f = false;
            h *= 2;
            for (u = 0; u < 12; u++) {
                h += c.charAt(11 - u) * (2 + (u + 1) % 8)
            }
            h = 11 - h % 11;
            if (h > 9) h = 0;
            if (l.charAt(1) != h) f = false;
            return f
        }
        return false
    }

    function r(e) {
        if (e.match(/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/) != null) {
            var t = e.substring(0, 3);
            var n = e.substring(4, 7);
            var r = e.substring(8, 11);
            var i = e.substring(12, 14);
            var o;
            var u;
            var a = true;
            u = t + n + r + i;
            s = u;
            c = s.substr(0, 9);
            var f = s.substr(9, 2);
            var l = 0;
            for (o = 0; o < 9; o++) {
                l += c.charAt(o) * (10 - o)
            }
            if (l == 0) a = false;
            l = 11 - l % 11;
            if (l > 9) l = 0;
            if (f.charAt(0) != l) a = false;
            l *= 2;
            for (o = 0; o < 9; o++) {
                l += c.charAt(o) * (11 - o)
            }
            l = 11 - l % 11;
            if (l > 9) l = 0;
            if (f.charAt(1) != l) a = false;
            return a
        }
        return false
    }
    var t = null;
    e.fn.cpfcnpj = function(i) {
        var s = e.extend({
            mask: false,
            validate: "cpfcnpj",
            event: "focusout",
            handler: e(this),
            ifValid: null,
            ifInvalid: null
        }, i);
        if (s.mask) {
            if (jQuery().mask == null) {
                s.mask = false;
                console.log("jQuery mask not found.")
            } else {
                if (s.validate == "cpf") {
                    e(this).mask("000.000.000-00")
                } else if (s.validate == "cnpj") {
                    e(this).mask("00.000.000/0000-00")
                } else {
                    var o = e(this);
                    var u = {
                        onKeyPress: function(e) {
                            var t = ["000.000.000-009", "00.000.000/0000-00"];
                            msk = e.length > 14 ? t[1] : t[0];
                            o.mask(msk, this)
                        }
                    };
                    e(this).mask("000.000.000-009", u)
                }
            }
        }
        return this.each(function() {
            var i = null;
            var o = e(this);
            e(document).on(s.event, s.handler, function() {
                if (o.val().length == 14 || o.val().length == 18) {
                    if (s.validate == "cpf") {
                        i = r(o.val())
                    } else if (s.validate == "cnpj") {
                        i = n(o.val())
                    } else if (s.validate == "cpfcnpj") {
                        if (r(o.val())) {
                            i = true;
                            t = "cpf"
                        } else if (n(o.val())) {
                            i = true;
                            t = "cnpj"
                        } else i = false
                    }
                } else i = false;
                if (e.isFunction(s.ifValid)) {
                    if (i != null && i) {
                        if (e.isFunction(s.ifValid)) {
                            var u = e.Callbacks();
                            u.add(s.ifValid);
                            u.fire(o)
                        }
                    } else if (e.isFunction(s.ifInvalid)) {
                        s.ifInvalid(o)
                    }
                }
            })
        })
    }
})(jQuery)


/* ==MUDA COR DA BORDA SE O CPF FOR FALSE===*/
$(document).ready(function () {
                $('#cpf').cpfcnpj({
                    mask: false,
                    validate: 'cpf',
                    event: 'click',
                    handler: '.btn-lg',
                    ifValid: function (input) {
                        input.removeClass("error");
                    },
                    ifInvalid: function (input) {
                        input.addClass("error");
                    }
                });
            });
.error { border-color: #fff600 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="form-control" id="cpf" type="tel" placeholder="CPF" required>
<button class="btn-lg btn-primary form-control" type="submit">Enviar</button>

1 Resposta 1

0

Basta criar um div abaixo do elemento onde você quer que apareça a mensagem e acrescentar os textos nela quando der o erro de validação do CPF. Acrescentei também o código que retira esse texto quando um CPF válido é digitado.Segue os códigos que acrescentei ao seu:

No HTML abaixo da tag <button>

<div class"error" id="erro-cpf"></div>

Na função que muda a cor da borda do <input>

$('#erro-cpf').html('Digite um CPF válido');

E para retirar a mensagem caso o CPF seja váido

$('#erro-cpf').html('');

Segue abaixo o código completo:

/*============FUNCAO Q VALIDA CPF==============*/
(function(e) {
    function n(e) {
        if (e.match(/^\d{2}\.\d{3}\.\d{3}\/\d{4}\-\d{2}$/) != null) {
            var t = e.substring(0, 2);
            var n = e.substring(3, 6);
            var r = e.substring(7, 10);
            var i = e.substring(11, 15);
            var o = e.substring(16, 18);
            var u;
            var a;
            var f = true;
            a = t + n + r + i + o;
            s = a;
            c = s.substr(0, 12);
            var l = s.substr(12, 2);
            var h = 0;
            for (u = 0; u < 12; u++) h += c.charAt(11 - u) * (2 + u % 8);
            if (h == 0) f = false;
            h = 11 - h % 11;
            if (h > 9) h = 0;
            if (l.charAt(0) != h) f = false;
            h *= 2;
            for (u = 0; u < 12; u++) {
                h += c.charAt(11 - u) * (2 + (u + 1) % 8)
            }
            h = 11 - h % 11;
            if (h > 9) h = 0;
            if (l.charAt(1) != h) f = false;
            return f
        }
        return false
    }

    function r(e) {
        if (e.match(/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/) != null) {
            var t = e.substring(0, 3);
            var n = e.substring(4, 7);
            var r = e.substring(8, 11);
            var i = e.substring(12, 14);
            var o;
            var u;
            var a = true;
            u = t + n + r + i;
            s = u;
            c = s.substr(0, 9);
            var f = s.substr(9, 2);
            var l = 0;
            for (o = 0; o < 9; o++) {
                l += c.charAt(o) * (10 - o)
            }
            if (l == 0) a = false;
            l = 11 - l % 11;
            if (l > 9) l = 0;
            if (f.charAt(0) != l) a = false;
            l *= 2;
            for (o = 0; o < 9; o++) {
                l += c.charAt(o) * (11 - o)
            }
            l = 11 - l % 11;
            if (l > 9) l = 0;
            if (f.charAt(1) != l) a = false;
            return a
        }
        return false
    }
    var t = null;
    e.fn.cpfcnpj = function(i) {
        var s = e.extend({
            mask: false,
            validate: "cpfcnpj",
            event: "focusout",
            handler: e(this),
            ifValid: null,
            ifInvalid: null
        }, i);
        if (s.mask) {
            if (jQuery().mask == null) {
                s.mask = false;
                console.log("jQuery mask not found.")
            } else {
                if (s.validate == "cpf") {
                    e(this).mask("000.000.000-00")
                } else if (s.validate == "cnpj") {
                    e(this).mask("00.000.000/0000-00")
                } else {
                    var o = e(this);
                    var u = {
                        onKeyPress: function(e) {
                            var t = ["000.000.000-009", "00.000.000/0000-00"];
                            msk = e.length > 14 ? t[1] : t[0];
                            o.mask(msk, this)
                        }
                    };
                    e(this).mask("000.000.000-009", u)
                }
            }
        }
        return this.each(function() {
            var i = null;
            var o = e(this);
            e(document).on(s.event, s.handler, function() {
                if (o.val().length == 14 || o.val().length == 18) {
                    if (s.validate == "cpf") {
                        i = r(o.val())
                    } else if (s.validate == "cnpj") {
                        i = n(o.val())
                    } else if (s.validate == "cpfcnpj") {
                        if (r(o.val())) {
                            i = true;
                            t = "cpf"
                        } else if (n(o.val())) {
                            i = true;
                            t = "cnpj"
                        } else i = false
                    }
                } else i = false;
                if (e.isFunction(s.ifValid)) {
                    if (i != null && i) {
                        if (e.isFunction(s.ifValid)) {
                            var u = e.Callbacks();
                            u.add(s.ifValid);
                            u.fire(o)
                        }
                    } else if (e.isFunction(s.ifInvalid)) {
                        s.ifInvalid(o)
                    }
                }
            })
        })
    }
})(jQuery)


/* ==MUDA COR DA BORDA SE O CPF FOR FALSE===*/
$(document).ready(function () {
                $('#cpf').cpfcnpj({
                    mask: false,
                    validate: 'cpf',
                    event: 'click',
                    handler: '.btn-lg',
                    ifValid: function (input) {
                        input.removeClass("error");
                        $('#erro-cpf').html('');
                    },
                    ifInvalid: function (input) {
                        $('#erro-cpf').html('Digite um CPF válido');
                        input.addClass("error");
                    }
                });
            });
.error { border-color: #fff600 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="form-control" id="cpf" type="tel" placeholder="CPF" required>
<button class="btn-lg btn-primary form-control" type="submit">Enviar</button>
<div class"error" id="erro-cpf"></div>

1
  • muito obrigado, to aprendendo agr e me atrapalho com coisa simples, vlwww 20/01/2018 às 12:53

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 .