I started studying Javascript about two weeks ago and I'm already trying to do some stuff for my company's website.

We have a wordpress elementor website, in which I created a new registration form, using javascript and Jquery to validate some specific fields, like CPF(like a SS number for brazilians), zip code and password.

All of these validation scripts are working fine, but just one of them (CPF), when I submit the form it sends without any value in this specific field.

Hope you guys can help me.

I used the following script to validate data of this field:

        <input type="text"  name="form-fields[field_cpf]" id="field_cpf" placeholder="Digite apenas números."  maxlength="11" minlength="11" onblur="alertarFuncao()" required="required" aria-required="true">

<script>
//validation script
function verificaCPF(strCpf) {     
    var soma;
    var resto;
    soma = 0;
    if (strCpf == "00000000000" ||
        strCpf == "11111111111" ||
        strCpf == "22222222222" ||
        strCpf == "33333333333" ||
        strCpf == "44444444444" ||
        strCpf == "55555555555" ||
        strCpf == "66666666666" ||
        strCpf == "77777777777" ||
        strCpf == "88888888888" ||
        strCpf == "99999999999") {
        return false;
    }
    
    for (i = 1; i <= 9; i  ) {
        soma = soma   parseInt(strCpf.substring(i - 1, i)) * (11 - i);
    }
    
    resto = soma % 11;
    
    if (resto == 10 || resto == 11 || resto < 2) {
        resto = 0;
    } else {
        resto = 11 - resto;
    }
    
    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 % 11;
    
    if (resto == 10 || resto == 11 || resto < 2) {
        resto = 0;
    } else {
        resto = 11 - resto;
    }
    
    if (resto != parseInt(strCpf.substring(10, 11))) {
        return false;
    }
    
    return true;

    }
//function if the field validation script returns false
    function campoInvalido(fieldId) {
        fieldId.style.borderColor = "red"

    }
//function if the field validation script returns true
    function campoValido(fieldId) {
        fieldId.style.borderColor = "green"
        
    }

//function that runs when the user clicks/taps out off the field
    function alertarFuncao() {
        var strCpf = document.getElementById('field_cpf').value; 
        verificaCPF(strCpf);
        if (!verificaCPF(strCpf)) {
            campoInvalido(document.getElementById('field_cpf'))
            alert('Por favor, insira um CPF válido.');            
        } else {
            campoValido(document.getElementById('field_cpf'));
            return document.getElementById('field_cpf').value = strCpf
        }
    }

</script>```

CodePudding user response：

I tested your code snipet on my own web server, and once I found an input which passes your checks it seems to work.

I see however that you didn't include a element in your snippet. The input must be a child of one of these elements in order to send data. If you have a closing tag directly above this input field you should probably move it under.

CodePudding user response：

I solved the problem turning the HTML custom field of elementor form into a regular text field, and did some modifications on the script, inserting an event listener to it. As I understood this is an Elementor form "problem", it doesn't recognize values in custom HTML fieds when submitting.

Here's the modified code:

    var soma;
    var resto;
    soma = 0;
    if (strCpf == "00000000000" ||
        strCpf == "11111111111" ||
        strCpf == "22222222222" ||
        strCpf == "33333333333" ||
        strCpf == "44444444444" ||
        strCpf == "55555555555" ||
        strCpf == "66666666666" ||
        strCpf == "77777777777" ||
        strCpf == "88888888888" ||
        strCpf == "99999999999") {
        return false;
    }
    
    for (i = 1; i <= 9; i  ) {
        soma = soma   parseInt(strCpf.substring(i - 1, i)) * (11 - i);
    }
    
    resto = soma % 11;
    
    if (resto == 10 || resto == 11 || resto < 2) {
        resto = 0;
    } else {
        resto = 11 - resto;
    }
    
    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 % 11;
    
    if (resto == 10 || resto == 11 || resto < 2) {
        resto = 0;
    } else {
        resto = 11 - resto;
    }
    
    if (resto != parseInt(strCpf.substring(10, 11))) {
        return false;
    }
    
    return true;

    }

    function campoInvalido(fieldId) {
        fieldId.style.borderColor = "red"

    }

    function campoValido(fieldId) {
        fieldId.style.borderColor = "green"
        
    }

    function alertarFuncao() {
        var strCpf = document.getElementById('form-field-field_cpf').value; 
        verificaCPF(strCpf);
        if (!verificaCPF(strCpf)) {
            campoInvalido(document.getElementById('form-field-field_cpf'))
            alert('Por favor, insira um CPF válido.');            
        } else {
            campoValido(document.getElementById('form-field-field_cpf'));
            return document.getElementById('form-field-field_cpf').value = strCpf
        }
    }
    
    document.getElementById('form-field-field_cpf').addEventListener("blur", alertarFuncao);```