Question 2548 in Wordpress Question posted in
The official Wordpress documentation can be found here.

When I use a validation script in a form field, the value ends up being empty when I submit – WordPress

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" class="elementor-field elementor-size-lg  elementor-field-textual" 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>```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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);```

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search