Enable Submit button if CPF is valid

Question

I used that tip link here. But I’m trying to implement something else I need and I can’t.

Next: I need to test if Cpf is valid and if it is, release the sign-up button. For this I test Cpf with the sign up mode disable button and if it is valid change the condition according to the code below that does not work and do not know pq.

   <form>
     <p><input type="text" id="cpf" name="cpf"/><span id="resposta"></span></p>
     <p><input id="cadastrar" name="cadastrar" type="submit" value="Cadastrar" disabled /></p>
   </form>

   <script>
    function CPF(){"user_strict";function r(r){for(var t=null,n=0;9>n;++n)t+=r.toString().charAt(n)*(10-n);var i=t%11;return i=2>i?0:11-i}function t(r){for(var t=null,n=0;10>n;++n)t+=r.toString().charAt(n)*(11-n);var i=t%11;return i=2>i?0:11-i}var n="CPF Inválido",i="CPF Válido";this.gera=function(){for(var n="",i=0;9>i;++i)n+=Math.floor(9*Math.random())+"";var o=r(n),a=n+"-"+o+t(n+""+o);return a},this.valida=function(o){for(var a=o.replace(/\D/g,""),u=a.substring(0,9),f=a.substring(9,11),v=0;10>v;v++)if(""+u+f==""+v+v+v+v+v+v+v+v+v+v+v)return n;var c=r(u),e=t(u+""+c);return f.toString()===c.toString()+e.toString()?i:n}}

    var CPF = new CPF();

    $(document).ready(function(){   
      $("#cpf").keypress(function(){
      var teste= CPF.valida($(this).val());
      $("#resposta").html(teste);
        if(teste == "CPF Válido"){ 
           $("#submit").removeAttr("disabled");
        }else {
          alert("O campo cpf é inválido! Preencha com um CPF válido por favor.");
          return false;
     }
   });

     $("#cpf").blur(function(){
     var teste= CPF.valida($(this).val());
     $("#resposta").html(teste);
        if(teste == "CPF Válido"){ 
           $("#submit").removeAttr("disabled");
        } else {
           alert("O campo cpf é inválido! Preencha com um CPF válido por favor.");
          return false;
        } 
      });
    });
  </script>

What returns from the function is a correct string? Valid CPF or Invalid CPF. However, it does not enable the button at all. I tested until receiving the value of the function and playing in a variable as it is above in the code.

I tested converting this variable to string ( tostring(teste) ). I definitely do not know what is wrong once testing Cpf is ok and when it is valid do not change the condition of the input button Submit to enable!

Answer 1

Change .keypress for .keyup that will work better. Remove Return false, or you’ll never be able to enter a value, especially with a alert interfering with the typing.

$("#cpf").keyup(function(){
     var teste = CPF.valida($(this).val());
     $("#resposta").html(teste);
     if(teste == "CPF Válido"){ 
        $("#cadastrar").removeAttr("disabled");
     }else {    
        $("#cadastrar").attr("disabled",true);
     }
});

No . Only make a fit, as I mentioned above.

$("#cpf").blur(function(){
     var teste= CPF.valida($(this).val());
     $("#resposta").html(teste);
     if(teste == "CPF Válido"){ 
        $("#cadastrar").removeAttr("disabled");
     } else {
        $("#cadastrar").attr("disabled",true);
     } 
});

There is no identifier #submit, the correct identifier for the Submit button is #cadastrar.

Working example in https://jsfiddle.net/sqpt8pbw/

Answer 2

I’ll make some small changes to your code.

Instead of returning a string to validate the CPF, I changed it to return a boolean value (true/false). This way, you just do the comparison normally.

Second, remove the return false false of your code, this way the person can complete the CPF.

Change the keypress for keyup. See the difference between them in this answer.

And last but not least, you are using the ID submit, but your button has the'register 'ID. Change the ID or switch to use the type.

See your code working below:

function CPF() {
  "user_strict";

  function r(r) {
    for (var t = null, n = 0; 9 > n; ++n) t += r.toString().charAt(n) * (10 - n);
    var i = t % 11;
    return i = 2 > i ? 0 : 11 - i
  }

  function t(r) {
    for (var t = null, n = 0; 10 > n; ++n) t += r.toString().charAt(n) * (11 - n);
    var i = t % 11;
    return i = 2 > i ? 0 : 11 - i
  }
  this.gera = function() {
    for (var n = "", i = 0; 9 > i; ++i) n += Math.floor(9 * Math.random()) + "";
    var o = r(n),
      a = n + "-" + o + t(n + "" + o);
    return a
  }, this.valida = function(o) {
    for (var a = o.replace(/\D/g, ""), u = a.substring(0, 9), f = a.substring(9, 11), v = 0; 10 > v; v++)
      if ("" + u + f == "" + v + v + v + v + v + v + v + v + v + v + v) return n;
    var c = r(u),
      e = t(u + "" + c);
    return f.toString() === c.toString() + e.toString()
  }
}

var CPF = new CPF();

$(document).ready(function() {
  $("#cpf").keyup(function() {
    var teste = CPF.valida($(this).val());
    console.log(teste)
    $("#resposta").html(teste);
    if (teste) {
      $("#cadastrar").attr("disabled", false);
    } else {
      $("#cadastrar").attr("disabled", true);
      console.log("O campo cpf é inválido! Preencha com um CPF válido por favor.");
    }
  });

  $("#cpf").blur(function() {
    var teste = CPF.valida($(this).val());
    $("#resposta").html(teste);
    if (teste) {
      $("#cadastrar").attr("disabled", false);;
    } else {
      console.log("O campo cpf é inválido! Preencha com um CPF válido por favor.");
      $("#cadastrar").attr("disabled", true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p><input type="text" id="cpf" name="cpf" /><span id="resposta"></span></p>
  <p><input id="cadastrar" name="cadastrar" type="submit" value="Cadastrar" disabled /></p>
</form>

Answer 3

I fixed your code so it works the right way.

function ValidarCPF(strCPF) {
  var Soma;
  var Resto;
  strCPF = strCPF.replace(/\D/g, ''); // Permite apenas números
  Soma = 0;
  if (strCPF == "00000000000") return false;

  for (i = 1; i <= 9; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (11 - i);
  Resto = (Soma * 10) % 11;

  if ((Resto == 10) || (Resto == 11)) Resto = 0;
  if (Resto != parseInt(strCPF.substring(9, 10))) return false;

  Soma = 0;
  for (i = 1; i <= 10; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (12 - i);
  Resto = (Soma * 10) % 11;

  if ((Resto == 10) || (Resto == 11)) Resto = 0;
  if (Resto != parseInt(strCPF.substring(10, 11))) return false;
  return true;
}

$(document).ready(function() {
  $("#cpf").blur(function() {
    var teste = ValidarCPF($(this).val());
    $("#resposta").html((teste ? 'Válido' : 'Inválido'));
    if (teste) {
      $("#cadastrar").removeAttr("disabled");
    } else {
      alert("O campo cpf é inválido! Preencha com um CPF válido por favor.");
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p><input type="text" id="cpf" name="cpf" /><span id="resposta"></span></p>
  <p><input id="cadastrar" name="cadastrar" type="submit" value="Cadastrar" disabled /></p>
</form>