Validação do Formulário

Você até poderia modificar o código do wordpress, ou de um determinado plugin para implementar a validação do formulário. Mas, não recomendo fazer isso.

O Wordpress e seus plugins, recebem novas atualizações e correções com o passar do tempo, se você alterar hoje o código do Wordpress ou de um de seus plugins, ao realizar uma atualização a alteração que você fez no código será substituída pelo novo arquivo atualizado, e você terá que fazer a alteração novamente.

Uma boa forma de validar um formulário do Wordpress é pesquisar por um plugin de formulário que contenha a opção de validação ja incluída. Uma boa dica é o plugin "Ninja Forms".

Ou desenvolver você mesmo um plugin para isso.

Aqui tem um tutorial sobre o Ninja Forms

https://www.canalwp.com/plugins-wordpress/formulario-contato-ninja-forms-wordpress/

Existe um pago que parece fazer isso, que é o Gravity Forms

http://www.gravityforms.com

Wagner, Daniel, obrigado pelo retorno.

Como estou começando a utilizar os fóruns da Alura, ainda não estou muito acostumado com os procedimentos aqui.

Eu formulei essa questão a partir do curso: Wordpress: Criação de um tema do zero, na aula 04, vídeo 3, onde o instrutor exibe a criação de um formulário de contato, mas não faz os procedimentos de validação.

Atualmente eu utilizo o contact form 7, e ele funciona muito bem, no entanto a única coisa que não me agrada é o fato de que eu não consigo fazer ele funcionar sem recarregar a página.

Em outro tópico que solicitei por aqui, fui indicado a utilizar o console do chrome, para perceber alguma falha no Javascript, mas nada aparece.

Como informei anteriormente, ele envia os e-mails com perfeição, gera mensagem de sucesso ou falha, faz a validação de dados... meu problema está no reload da página junto a "sujeira" que ele deixa na url ("site.com.br/contato/#wpcf7 + tipo de erro")

Eu acredito que como eu desenvolvi meu tema totalmente do zero, deve ter algum código em PHP ou JS que eu não inseri para que o Ajax do formulário funcione corretamente, porque o "CF7" não produz o mesmo erro em temas nativos do "WP".

Se vocês puderem me ajudar com essa questão, ficarei agradecido.

Att. Denis R. Dib

Olá Denis!

Ficou difícil pra mim entender o problema, é possível você compactar os arquivos do site e gravar no google drive, postando o link para download aqui?

Com os arquivos aqui eu posso simular o erro e tentar te ajudar a resolver.

Para validar o formulário usando Javascript e o Contact Form 7 você pode tentar o seguinte, primeiro, criar um ID para o formulário, isso você consegue fazer direto no shortcode, basta ver este exemplo:

http://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/

Depois, você pode criar um arquivo javascript próprio e adicionar no seu tema. Será necessário criar um listener para o formulário, supondo que o seu formulário chame "form1", o código ficaria assim.

try {
  document.getElementById("form1").addEventListener("submit", checkform_meuform, false);
} catch (error) {
  //O form nao existe na pagina que foi acessada
}

Um exemplo de como validar apenas 1 campo com o nome "your-name":

function checkform_meuform (e) {


    var form = e.target;
    var continuar = true;
    var mensagem = "Ocorreram os seguintes erros:\n"
    form.elements["your-name"].style.backgroundColor='#FFFFFF';

    if (form.elements["your-name"].value == "") {
        mensagem = mensagem + 'Por favor informe o seu nome\n';
        form.elements["your-name"].style.backgroundColor='#FFFF99';
        continuar = false;
    } 

    if (continuar) {
        return true;
    } else {
        alert(mensagem);
        e.preventDefault();
        return false;
    }
}

Wagner, obrigado pelo retorno. Pelo Contact Form 7 eu encontrei a resposta. Para que o Ajax possa rodar na validação do formulário, bastava inserir um "<?php wp_head(); ?>" antes de concluir o header e um "<?php wp_footer(); ?>" antes de fechar o body.

Daniel, obrigado pelo retorno. Eu tentarei utilizar a solução que você propôs sem utilizar o plugin. Muito obrigado por enquanto.