toarelli Posted July 6, 2018 at 06:30 PM Report #611240 Posted July 6, 2018 at 06:30 PM Caros amigos. Estou montando um formulário e contêm o campo CNPJ. Fiz uma validação que está funcionando. O problema é quando o sistema acusa que o CNPJ é inválido. Quando acusa que é inválido mostra a mensagem em JAVASCRIPT, infelizmente, fica na memória repetindo mais de uma vez. Como limpo o campo após dar a mensagem de inválido, o campo CNPJ fica limpo. Abaixo o código: java script: function FormataCnpj(campo, teclapres){ var tecla = teclapres.keyCode; var vr = new String(campo.value); vr = vr.replace(".", ""); vr = vr.replace("/", ""); vr = vr.replace("-", ""); tam = vr.length + 1; if (tecla != 14) { if (tam == 3) campo.value = vr.substr(0, 2) + '.'; if (tam == 6) campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 5) + '.'; if (tam == 10) campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(6, 3) + '/'; if (tam == 15) campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(6, 3) + '/' + vr.substr(9, 4) + '-' + vr.substr(13, 2); } } 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; } no formulário chamo assim: <div class="form-group"> <label for="exampleInputEmail1">CNPJ</label> <input type="text" id="cnpj" name="cnpj" maxlength="18" class="form-control" style="width:14%" onkeyup="FormataCnpj(this,event)" onblur="if(!validarCNPJ(this.value)){alert('CNPJ Informado é inválido'); this.value='';}" placeholder="Apenas Número"> </div> Grato, Toarelli
washalbano Posted July 6, 2018 at 11:49 PM Report #611242 Posted July 6, 2018 at 11:49 PM Olá! Ao invés de usar alert para mostrar ao usuário que o cnpj está inválido, mude a classe do campo de entrada, e acrescente um texto pequeno, abaixo ou acima, avisando ao usuário que aquele cnpj está inválido.
toarelli Posted July 7, 2018 at 08:36 AM Author Report #611247 Posted July 7, 2018 at 08:36 AM 8 horas atrás, washalbano disse: Olá! Ao invés de usar alert para mostrar ao usuário que o cnpj está inválido, mude a classe do campo de entrada, e acrescente um texto pequeno, abaixo ou acima, avisando ao usuário que aquele cnpj está inválido. Amigo Albano. Teria um exemplo ? Entendi a lógica, mas como chamaria após a função validarCnpj ? Grato Toarelli
washalbano Posted July 7, 2018 at 07:09 PM Report #611248 Posted July 7, 2018 at 07:09 PM Segue sugestão: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> input.error{ border: 1px solid red; box-shadow: 0 0 3px red; } input.success{ border: 1px solid green; box-shadow: 0 0 3px green; } small.error{ color: red; display: block; } </style> </head> <body> <div class="form-group"> <label for="exampleInputEmail1">CNPJ</label> <input type="text" id="cnpj" name="cnpj" maxlength="18" class="form-control" style="width:14%" onkeydown="FormataCnpj(this,event)" onblur="validarCNPJ(this.value)" placeholder="Apenas Números" title="CNPJ: Digite apenas números"> </div> <script type="text/javascript"> function FormataCnpj(campo, teclapres){ var tecla = teclapres.keyCode || teclapress.which; // verificar se a tecla pressionada corresponde a um valor numérico if (!teclapres.shiftKey && !teclapres.altKey && !teclapres.ctrlKey && // números do teclado alfanumérico tecla > 47 && tecla < 58 || // números do teclado numérico tecla > 95 && tecla < 106 || // Backspace, Tab e Enter tecla == 8 || tecla == 9 || tecla == 13 || // Home e End tecla == 35 || tecla == 36 || // seta pra esquerda e seta pra direita tecla == 37 || tecla == 39 || // Delete e Insert tecla == 46 || tecla == 45 ){ } else { // se não for valor numérico, não aceita teclapres.preventDefault(); } var vr = campo.value.replace(/\D/g,'')+teclapres.key; tam = vr.length if (tecla != 14 && tecla!=8) { if (tam == 3) campo.value = vr.substr(0, 2) + '.'; if (tam == 6) campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.'; if (tam == 9) campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5, 3) + '/'; if (tam == 13) campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5, 3) + '/' + vr.substr(8, 4) + '-'; if (tam == 14){ campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5, 3) + '/' + vr.substr(8, 4) + '-' + vr.substr(12, 2); // testa a validade do cnpj validarCNPJ(vr); } } } // função que vai estilizar o input com as características de um input com erro function setError(){ // define qual elemento será marcado com o erro var element = document.getElementById('cnpj'); // remove a classe de sucesso e adiciona a class de erro element.className = element.className.replace('success', '')+' error'; // verifica se já existe um elemento small com o erro do cnpj var error_element = document.getElementById('cnpj-error'); if(error_element == null){ // adiciona um elemento small depois do input com a mensagem de erro element.insertAdjacentHTML('afterend', '<small id="cnpj-error" class="error">CNPJ Inválido</div>'); } } // função que vai estilizar o input com as características de um input com acerto function setSuccess(){ // define qual elemento será marcado com o erro element = document.getElementById('cnpj'); // remove a class de erro, se existir e adiciona a classe de sucesso element.className = element.className.replace('error', '')+' success'; // verifica se já existe um elemento small com o erro do cnpj var error_element = document.getElementById('cnpj-error'); if(error_element){ error_element.parentNode.removeChild(error_element); } } function validarCNPJ(cnpj) { cnpj = cnpj.replace(/\D/g,''); if( cnpj == '' || cnpj.length != 14 || // Elimina CNPJs invalidos conhecidos cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999"){ // dispara a função que define o erro setError(); // encerra a validação 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)){ // dispara a função que define o erro setError(); // encerra a validação 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)){ // dispara a função que define o erro setError(); // encerra a validação return false; } setSuccess(); return true; } </script> </body> </html>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now