How to display DIV only if the function result is true?

Question

I’m new still, I found this javascript that checks if the CPF is true or false (already with dots and dash), if the result gives false it leaves the edge of the input yellow, but I would like besides it to leave the yellow bar that appears a text below the input saying "Please enter a valid CPF."

This is the 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");
                }
            });
        });

I created a DIV:

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

how do I make this DIV to be hidden, and only appear below the input when the result of the function is 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>

Answer 1

Just create a div below the element where you want the message to appear and add the texts to it when the CPF validation error occurs. I also added the code that removes this text when a valid CPF is typed.Follow the codes I added to your:

In HTML below tag <button>

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

In the function that changes the border color of the <input>

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

And to remove the message in case the CPF is empty

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

Below is the complete code:

/*============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>