Include CSS class via jQuery when verifying CPF

Question

Include CSS class via jQuery when verifying CPF

Navigation

#1 by (3 votes)

1

I have the following code from a form that exits the CPF field and validates the CPF. I would like that if the test is unsuccessful the "has-error" class would be included in the div where the input is located and if it succeeds add the "has-success" class. As I have several divs with the class "form-group" I tried to use parents() but it did not work.

function validaCPF2(cpf_principal_condutor) {
    if (!testCPF2(cpf_principal_condutor)) {
        $('#errocpf2').show();
		    $(this).parents('.form-group').removeClass('has-success');
		    $(this).parents('.form-group').addClass('has-error');
		    document.getElementById("cpf_principal_condutor").focus();
        return false;
    } else {
		    $('#errocpf2').hide();
		    $(this).parents('.form-group').removeClass('has-error');
		    $(this).parents('.form-group').addClass('has-success');
        return true;
    }
};
function testCPF2() {
    var strCPF = $("#cpf_principal_condutor").val().replace(".","").replace(".","").replace('-',"").replace("_","");
    var Soma;
    var Resto;
    Soma = 0;
	if (strCPF === "00000000000") return false;
	if (strCPF === "11111111111") return false;
	if (strCPF === "22222222222") return false;
	if (strCPF === "33333333333") return false;
	if (strCPF === "44444444444") return false;
	if (strCPF === "55555555555") return false;
	if (strCPF === "66666666666") return false;
	if (strCPF === "77777777777") return false;
	if (strCPF === "88888888888") return false;
	if (strCPF === "99999999999") 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="form-group">
  <label class="control-label">Nome completo do condutor principal do veículo: *</label>
  <input id="nome_principal_condutor" name="nome_principal_condutor" placeholder=" " type="text" class="form-control" required>
</div>
<div class="form-group">
  <label class="control-label">CPF do principal condutor *</label>
  <input id="cpf_principal_condutor" name="cpf_principal_condutor" placeholder="123.456.789-00" onblur="validaCPF2();" type="text" class="form-control" required>
  <small id="errocpf2" style="color: #a94442; display:none;" class="help-block">O CPF informado é inválido</small>
</div>

javascript jquery

asked by anonymous 31.12.2018 / 16:41

1 answer

Problem in python's print How to add caption to a chart using ChartJS?

score 3 · Accepted Answer

You are not passing the input to the function, so the cpf_principal_condutor argument has no value, and the $(this) is also not referring to anything.

You should send the element via this to onblur:

onblur="validaCPF2(this);"

So the argument cpf_principal_condutor of the function will be the input that called the function. In the function you get the value of the field with cpf_principal_condutor.value and use as argument to validate the CPF.

And change the $(this) by cpf_principal_condutor , which is the input in question.

I put two console.log() in the code just to illustrate the change from class. Erase these lines when putting them into production.

See:

function validaCPF2(cpf_principal_condutor) {

    if (!testCPF2(cpf_principal_condutor.value)) {
        $('#errocpf2').show();
		    $(cpf_principal_condutor).parents('.form-group').removeClass('has-success');
		    $(cpf_principal_condutor).parents('.form-group').addClass('has-error');
		    $("#cpf_principal_condutor").focus();

        console.log($(cpf_principal_condutor).parents('.form-group')[0]);

        return false;
    } else {
		    $('#errocpf2').hide();
		    $(cpf_principal_condutor).parents('.form-group').removeClass('has-error');
		    $(cpf_principal_condutor).parents('.form-group').addClass('has-success');
        console.log($(cpf_principal_condutor).parents('.form-group')[0]);
        return true;
    }
    
};
function testCPF2() {
    var strCPF = $("#cpf_principal_condutor").val().replace(".","").replace(".","").replace('-',"").replace("_","");
    var Soma;
    var Resto;
    Soma = 0;
	if (strCPF === "00000000000") return false;
	if (strCPF === "11111111111") return false;
	if (strCPF === "22222222222") return false;
	if (strCPF === "33333333333") return false;
	if (strCPF === "44444444444") return false;
	if (strCPF === "55555555555") return false;
	if (strCPF === "66666666666") return false;
	if (strCPF === "77777777777") return false;
	if (strCPF === "88888888888") return false;
	if (strCPF === "99999999999") 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="form-group">
  <label class="control-label">Nome completo do condutor principal do veículo: *</label>
  <input id="nome_principal_condutor" name="nome_principal_condutor" placeholder=" " type="text" class="form-control" required>
</div>
<div class="form-group">
  <label class="control-label">CPF do principal condutor *</label>
  <input id="cpf_principal_condutor" name="cpf_principal_condutor" placeholder="123.456.789-00" onblur="validaCPF2(this);" type="text" class="form-control" required>
  <small id="errocpf2" style="color: #a94442; display:none;" class="help-block">O CPF informado é inválido</small>
</div>