Cacher is the code snippet organizer for pro developers

// HTML

    Adicionar a classe .valida-cpf no input
    
// CSS

    .cpf-invalido {
			input { border-color: red !important; }
			&:before {
				content: " CPF Inválido!";
				font-size: 11px;
				font-weight: bold;
				color: red;
			}
		}

// JS (jQuery)


    $('.valida-cpf').focusout(function(){

        var cpf = $(this).val();

        if( is_cpf( cpf ) ) {
            $(this).parent().removeClass('cpf-invalido');
        } else {
            $(this).parent().addClass('cpf-invalido');
            $(this).val('');
        }

    });
    
    function is_cpf(r){if(11!=(r=r.replace(/[^\d]/g,"")).length)return!1;if("00000000000"==r)return!1;var e,n=0;for(i=1;i<=9;i++)n+=parseInt(r[i-1])*(11-i);if(10!=(e=10*n%11)&&11!=e||(e=0),e!=parseInt(r[9]))return!1;for(n=0,i=1;i<=10;i++)n+=parseInt(r[i-1])*(12-i);return 10!=(e=10*n%11)&&11!=e||(e=0),e==parseInt(r[10])}