Ir para conteúdo

Como corrigir a validação dos formulários do RD STATION com Javascript em Landing Pages

Se você utiliza o sitema da RD STATION para criação de landing pages e captação de leads e enfrenta problemas com validação, temos a solução. Confira nosso artigo em parceria com a agência AMPER e PIXEL PROJECT.

Recentemente a empresa AMPER.AG entrou em contato comigo, através da minha empresa de desenvolvimentos de sites em Wordpress - Pixel Project. A demanda era relativamente simples, mas também complexa. O cliente indicou que a validação (obrigatóriedade de preenchido) dos campos não funcionava, além disso caso algum dos campos fosse esquecido no preenchimento, todos os dados já preenchidos era perdido. Mesmo após relatarem esse problema a RD STATION, o suporte da plataforma indicou que eles deveriam contratar alguém especialista em Javascript para corrigir a situação. Originalmente eles tinham esse código abaixo, que funcionava para impedir que o formulário fosse disparo sem o preenchido do formulário.

Esse era o código original deles:

<script type="text/javascript"> </script> 

<script type="text/javascript"> 

function limparCampos(){ 

  $('form').trigger('reset'); 

  $('input').prop('checked', false); 

} 

function checkRequiredFields(){ 

    let requiredFields = document.querySelectorAll('[required]'); 

    let allFieldsFilled = true; 

          requiredFields.forEach(function(field) { 

              if (!field.value) { 

                  allFieldsFilled = false; 

              } 

          }); 

          return allFieldsFilled 

      }; 

$(document).ready(function(){limparCampos();}) 

$('form').on("submit",function(event){ 

  if (checkRequiredFields()) { 

    window.setTimeout(function(){limparCampos();}, 1000); 

  }else{ 

    event.preventDefault(); 

  } 

}); 

</script>

Porém, após uma atualização recente, esse código parou de funcionar. Para resolver a situação eu utilizei o código a seguir.

<script type="text/javascript">
  function checkRequiredFields() {
    let allFieldsFilled = true;
    let requiredFields = document.querySelectorAll('form [required]');

    requiredFields.forEach(function (field) {
      if (field.type === 'checkbox' || field.type === 'radio') {
        let checked = document.querySelector(`input[name="${field.name}"]:checked`);
        if (!checked) allFieldsFilled = false;
      } else if (!field.value.trim()) {
        allFieldsFilled = false;
      }
    });

    return allFieldsFilled;
  }

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('form').addEventListener('submit', function (event) {
      if (checkRequiredFields()) {
        setTimeout(function () {
          event.target.reset();
        }, 1000);
      } else {
        alert('Preencha todos os campos obrigatórios.');
        event.preventDefault();
      }
    });
  });
</script>

 

Nesse código, ele conseguiu abrager todos os campos que eu precisava. 

image.png

Mas onde inserir o código? É bem simples.

1. Abra a sua landing page que deseja editar.
2. Vá em EDIÇÃO AVANÇADA, em seguida aba Javascript em HEAD, cole o código acima no campo e salve.
image.png

Após isso, todos os campos serão obrigatórios. Lembrando que esse ajuste deveria ser feito pela própria RD STATION. 

A solução foi feita através do CHATGPT, como eu não tenho conhecimento técnico na linguagem, utilizei a ferramenta e ela me ajudou. 


×
×
  • Criar Novo...

Informação Importante

Termos de Uso Política de Privacidade Regras