Enable submit button if CPF is valid

Question

Enable submit button if CPF is valid

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I used the hint of this link here >. But I'm trying to implement something more that I need and can not do.

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

   <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 it until I got the value of the function and playing in a variable as it is above in the code.

I tested this by converting this variable to string ( tostring(teste) ). I definitely do not know what's wrong since testing cpf is ok and when it's valid it does not change the input submit button's condition to enable!

javascript jquery

asked by anonymous 06.07.2017 / 14:57

3 answers

1

I'll make some minor changes to your code.

Instead of returning 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 from your code, so that the person can complete the CPF .

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

And last, but not least, you're using the submit ID, but your button has the 'sign up' ID. Change the ID or change to use type .

See your working code 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><inputtype="text" id="cpf" name="cpf" /><span id="resposta"></span></p>
  <p><input id="cadastrar" name="cadastrar" type="submit" value="Cadastrar" disabled /></p>
</form>

06.07.2017 / 15:19

0

I have corrected your code to work correctly.

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><inputtype="text" id="cpf" name="cpf" /><span id="resposta"></span></p>
  <p><input id="cadastrar" name="cadastrar" type="submit" value="Cadastrar" disabled /></p>
</form>

06.07.2017 / 15:20

Format numeric sequence in CPF format with separators using javascript What is the function of the __wakeup magic method in php?

score 2 · Accepted Answer

Change% w / w% w / w w w w w w w w w w w w w w w w w w w w w w w w w w w w w ww Remove return false, otherwise you will never be able to type a value, even more with .keypress disrupting 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);
     }
});

In .blur only make an adjustment, 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 .keyup , the correct identifier for the submit button is alert .

Example working at link