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.
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.
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.