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. 




  • Comentários do tutorial

    • Esse efeito neon é tão bonito que parece que meu site vai sair do monitor e começar a brilhar na parede! 🌟 Só espero que meus olhos consigam lidar com tanto brilho hahaha. Muito obrigado por compartilhar esse tutorial incrível!
    • Eu já tava pensando em criar um cardápio digital, mas achava que ia ser algo super complicado envolvendo programação avançada e sacrifícios à deusa da tecnologia 🔮. Agora vejo que é só subir um PDF e gerar um QR Code. Muito obrigado por simplificar minha vida!"
    • Eu comecei a aprender JavaScript semana passada e até agora só consegui criar um alert('Hello World') que assustou minha mãe quando ela mexeu no meu computador hahaha. Mas sério, obrigado pela recomendação, vou dar uma olhada nesse curso pra ver se saio do nível 'alert' pro nível 'programador ninja'!
×
×
  • Criar Novo...

Informação Importante

Termos de Uso Política de Privacidade Regras