JSFiddle - React, Tailwind, and code Playground
HTML
<label class="control-label">CNPJ</label>
<input type="text" name="cnpj" id="cnpj" class="form-control classe-input" placeholder="CNPJ">
<label class="control-label">Nome</label>
<input type="text" name="nome" id="nome" class="form-control classe-input" placeholder="Nome" required>
<button type="submit" id="cadastrar" class="btn btn-primary btn-lg botao-cadastro"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Efetuar Cadastro</button>
CSS
/*
Adicionei o evento ao 'onBlur', que é quando o campo perde o foco, ou seja quando clica em qualquer outro campo da tela que não o input do CNPJ.
Se você adicionar o evento no 'click/focus' do campo, sempre dará erro, visto que ao clicar/receber o foco pela primeira vez ele ainda não tem um valor válido!
Não sei o quão íntegro esse código é, poderias usar algumas ferramentas (libs) que ajudariam nisso.
De toda forma, a forma com a qual eu fiz aqui não é a melhor possível, mas uma que pode te ajudar a entender o contexto.
E deixe eu dizer mais uma coisa sobre isso: Nao tem nada de jQuery sendo usado nesse código, por isso podes remover e dependência do mesmo se necessário!
Espero ter ajudado...
*/
JavaScript
function validarCNPJ(cnpj) {
cnpj = cnpj.replace(/[^\d]+/g, '');
if (cnpj == '') return false;
if (cnpj.length != 14)
return false;
// Elimina CNPJs invalidos conhecidos
if (cnpj == "00000000000000" ||
cnpj == "11111111111111" ||
cnpj == "22222222222222" ||
cnpj == "33333333333333" ||
cnpj == "44444444444444" ||
cnpj == "55555555555555" ||
cnpj == "66666666666666" ||
cnpj == "77777777777777" ||
cnpj == "88888888888888" ||
cnpj == "99999999999999")
return false;
// Valida DVs
tamanho = cnpj.length - 2
numeros = cnpj.substring(0, tamanho);
digitos = cnpj.substring(tamanho);
soma = 0;
pos = tamanho - 7;
for (i = tamanho; i >= 1; i--) {
soma += numeros.charAt(tamanho - i) * pos--;
if (pos < 2)
pos = 9;
}
resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
if (resultado != digitos.charAt(0))
return false;
tamanho = tamanho + 1;
numeros = cnpj.substring(0, tamanho);
soma = 0;
pos = tamanho - 7;
for (i = tamanho; i >= 1; i--) {
soma += numeros.charAt(tamanho - i) * pos--;
if (pos < 2)
pos = 9;
}
resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
if (resultado != digitos.charAt(1))
return false;
return true;
}
var $input_cnpj = document.getElementById('cnpj');
$input_cnpj.addEventListener("blur", function() {
if (!validarCNPJ($input_cnpj.value)) {
alert('CNPJ Inválido!')
}
}, false);