4

Tenho uma página em HTML com um formulário de envio de e-mail. Preciso verificar na mesma página se os campos foram preenchidos ou não no momento em que o usuário clicar no botão Submit. Aparentemente ele está ignorando a função javascript e está enviando o e-mail independente do conteúdo do formulário.

Segue o script.js com a função e o index.html em seguida.

function checkForm() {
    // Fetching values from all input fields and storing them in variables.
    var nome = document.getElementById("nome").value;
    var email = document.getElementById("email1").value;
    var fone = document.getElementById("telefone").value;
    var mensagem = document.getElementById("mensagem").value;

    //Check input Fields Should not be blanks.
    if (nome == '' || email == '' || fone == '' || mensagem == '') {
        alert("Por favor preencha todos os campos.");
    } else {
        //Notifying error fields
        var name = document.getElementById("nome");
        var mail = document.getElementById("email");
        var telefone = document.getElementById("telefone");
        var mensagemp = document.getElementById("mensagem");
        //Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
        if (name.innerHTML == 'Nome' || mail.innerHTML == 'E-mail' || telefone.innerHTML == 'Telefone' || mensagemp.innerHTML == 'Sua Mensagem') {
            alert("Por favor, preencha o formulário com informações válidas");
        } else {
            //Submit Form When All values are valid.
            document.getElementById("myForm").submit();
        }
    }
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<form method="post" action="sendmail.php">
	<input type="text" class="text" value="Nome" name="nome" required onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Nome';}">
	<input type="text" class="text" value="E-mail" name="email" required onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'E-mail';}">
	<input type="text" class="text" value="Telefone" name="telefone" required onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Telefone';}">
	<textarea name="mensagem" required onfocus="if(this.value == 'Sua mensagem') this.value='';" onblur="if(this.value == '') this.value='Sua mensagem';" >Sua mensagem</textarea>
	<input type="submit" value="[ Enviar Mensagem ]" onclick="checkForm()" />
</form>

</body>
</html>

sendmail.php

<?php

  $to      = '[email protected]';
  $subject = 'Contato Site';
  $message = "Nome: ".$_POST['nome']."\r\nE-mail: ".$_POST['email']."\r\nTelefone: ".$_POST['telefone']."\r\n\r\nMensagem:\r\n".$_POST['mensagem']."\r\n\r\n";
  $headers = 'From: [email protected]' . "\r\n" .
'Reply-To: [email protected]' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
  mail($to, $subject, $message, $headers);

header("Location: http://www.site.com.br/obrigado.html");

die();
?>
6
  • substitua type="submit" por type="button", desta forma provavelmente irá funcionar a sua validação. 17/07/2017 às 16:59
  • @RobertoFagundes mas assim o formulário não será submetido. Hearthz, o que você quer dizer por "ignorando"? Os alert definido na função não são exibidos? Aliás, utilize value para validar o valor de um campo, não innerHTML.
    – Woss
    17/07/2017 às 17:00
  • @AndersonCarlosWoss vai sim, ele esta forçando o submit dentro da função de validação. 17/07/2017 às 17:01
  • @RobertoFagundes de fato, não havia percebido isso. Erro meu.
    – Woss
    17/07/2017 às 17:02
  • E acho que faltou definir os atributos id dos campos. No JS você seleciona os elementos pelo id, mas no HTML não os especifica.
    – Woss
    17/07/2017 às 17:04

4 Respostas 4

3

Os campos de seu formulário e o próprio formulário não possui o atributo id, requerido para utilizar .getDocumentById("algumid"). Sua função também deve retornar false caso ocorra erro na validação... Tente como abaixo:

Form

<form method="post" action="sendmail.php" id="myForm">
    <input type="text" class="text" value="Nome" id="nome" name="nome" required onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
    <input type="text" class="text" value="E-mail" id="email" name="email" required onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
    <input type="text" class="text" value="Telefone" id="telefone" name="telefone" required onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
    <textarea name="mensagem" id="mensagem" required onfocus="if(this.value == '') this.value='';" onblur="if(this.value == '') this.value='';" >Sua mensagem</textarea>
    <input type="submit" value="[ Enviar Mensagem ]" onclick="return checkForm()" />
</form>  

JS

<script>
    function checkForm() {
        // Fetching values from all input fields and storing them in variables.
        var nome = document.getElementById("nome").value;
        var email = document.getElementById("email").value;
        var fone = document.getElementById("telefone").value;
        var mensagem = document.getElementById("mensagem").value;

        //Check input Fields Should not be blanks.
        if (nome == '' || email == '' || fone == '' || mensagem == '') {
            alert("Por favor preencha todos os campos.");
            return false;
        } else {
            //Notifying error fields
            var name = document.getElementById("nome");
            var mail = document.getElementById("email");
            var telefone = document.getElementById("telefone");
            var mensagemp = document.getElementById("mensagem");
            //Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
            if (name.innerHTML == 'Nome' || mail.innerHTML == 'E-mail' || telefone.innerHTML == 'Telefone' || mensagemp.innerHTML == 'Sua Mensagem') {
                alert("Por favor, preencha o formul&aacute;rio com informa&ccedil;&otilde;es v&aacute;lidas");
                return false;
            } else {
                //Submit Form When All values are valid.
                document.getElementById("myForm").submit();
                return true;
            }

        }
    }
</script>
4
  • Mesmo adicionando os id's necessários e os returns continua aparentemente bypassando e enviando e-mail de qualquer modo.
    – Heathz
    17/07/2017 às 17:20
  • Compare o código acima com o seu... Se você executar o exemplo acima vai funcionar... Não se esqueça de deixar os campos vazios para validar. 17/07/2017 às 17:24
  • Ah, e observe o onblur="if (this.value == '') {this.value = 'Nome';}" dos seus campos... desta forma os campos nunca estarão preenchidos para validar... :P 17/07/2017 às 17:32
  • então... na verdade ele nunca ficaria vazio por isso no JS tem uma outra verificação com os valores que você mostrou aí: if (name.innerHTML == 'Nome' || mail.innerHTML == 'E-mail' || telefone.innerHTML == 'Telefone' || mensagemp.innerHTML == 'Sua Mensagem')
    – Heathz
    17/07/2017 às 17:38
2

Resposta + justificativa

Primeiramente, gostaria de mencionar que você está utilizando uma forma um pouco obsoleta de realizar o que você precisa, pois você pode utilizar o atributo placeholderdo HTML5 ao invés de fazer toda essa parte de onBlur e onFocus, e também você não precisa pegar elemento por elemento para validar, você pode adicionar uma classe em comum a todos eles e pegar um array com todos os elementos e os percorrer com um laço de repetição validando um a um, assim fica muito mais simples.

Exemplo

Veja como o seu código ficou extremamente menor neste exemplo que eu criei pra você:

function check_form(){
    var inputs = document.getElementsByClassName('required');
  var len = inputs.length;
  var valid = true;
  for(var i=0; i < len; i++){
     if (!inputs[i].value){ valid = false; }
  }
  if (!valid){
    alert('Por favor preencha todos os campos.');
    return false;
  } else { return true; }
}
<form method="post" action="sendmail.php" onsubmit="return check_form()" >
    <input type="text" class="text required" value="" placeholder="nome" name="nome">
    <input type="text" class="text required" value="" placeholder="email" name="email">
    <input type="text" class="text required" value="" placeholder="telefone" name="telefone">
    <textarea class="required" placeholder="mensagem" name="mensagem"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>

Veja o código funcionando no JSFiddle.

2
  • 2
    opa! deu certo meu caro. Tinha esquecido completamente do placeholder... e olha que já tinha usado em outras ocasiões. Sobre definir uma classe em comum e utilizar num array, não tinha pensado me nada próximo a isso haha. Valeu!
    – Heathz
    17/07/2017 às 17:56
  • 1
    as vezes a gente esquece de coisas simples mas que acabam sendo importantes mesmo. é sempre bom se atualizar com as respostas do pessoal por aqui, e a questão das classes é só lógica de programação mesmo, com o tempo você vai adquirir maior experiência começar a pensar direto na solução mais fácil :P (ou por preguiça mesmo, também serve) 17/07/2017 às 18:14
2

Pois você está chamando getElementById, mas se você verificar nenhum dos campos tem o atributo id. Exemplo:

<input type="text" class="text" value="Nome" id="nome" name="nome" required onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Nome';}">

Você tem que colocar os ids nos campos para utilizar este método DOM.

O botão está com o tipo submit e vindo primeiro que a função onclick ou seja está ação será executada antes do checkform, causando um conflito. Deixe o tipo como button. Exemplo:

<input type="button" value="[ Enviar Mensagem ]" onclick="checkForm()" />
</form>
3
  • então meu caro, realmente esqueci desse "detalhe". Mas mesmo após adicionar os devidos id's nos campos ele continua ignorando e enviando o email com os campos vazios ou preenchidos.
    – Heathz
    17/07/2017 às 17:15
  • @Heathz altere o tipo do botão para button 17/07/2017 às 17:18
  • com type button ele não fez absolutamente nada.
    – Heathz
    17/07/2017 às 17:23
0

O HTML5 trouxe diversas possibilidades e, principalmente facilidades para os desenvolvedores. Uma delas é relacionada a validação de formulários. O que antes era feito com algum tempo e JavaScript, hoje pode ser feito diretamente no HTML e em um tempo muito menor.

HTML5 inclui um mecanismo bastante sólido na validação de formulários com base nos atributos da tag input: type, pattern e require. Graças a esses novos atributos, você pode delegar algumas funções de verificação de dados para o navegador.

<form method="post" action="words.php">
    <input type="text" class="text required" value="" placeholder="nome" name="nome" required="required">
    <input type="email" class="text required" value="" placeholder="email" name="email" required="required" >
    <input pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" type="tel" class="text required" value="" placeholder="dd dddd-dddd ou dd dddd-ddddd" name="telefone" required="required">
    <textarea class="required" placeholder="mensagem" name="mensagem" id="mensagem" required="required"></textarea>
    <input type="submit" value="[ Enviar Mensagem ]" />
</form>
  • input type="text" para manipulação de dados de texto simples
  • input type="email" valida o campo para garantir que o dado digitado seja de fato um endereço de e-mail válido.
  • input type="tel" para validar telefones que em conjunto com o atributo pattern aceita uma expressão regular, e que veremos a seguir.
  • O atributo pattern da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular.
  • pattern="[0-9]{2}[\s][0-9]{4}-[0-9]{4,5}" indica 2 digitos espaço 4 digitos tracinho 4 ou 5 digitos (valida telefones fixos com DDD e 8 dígitos e celulares com DDD e 8 ou 9 dígitos.)

O atributo required é um atributo booleano usado para indicar que um determinando campo de formulário é obrigatório para o envio do mesmo. Ao adicionar esse atributo a um campo de formulário, o navegador obriga o usuário a inserir dados naquele campo antes de enviar o formulário.

3
  • Será que tem como colocar duas respostas corretas? hahaha 17/07/2017 às 17:11
  • Na verdade a condição está correta na pergunta e você acabou invertendo. Perceba que ele emite o alerta nestas condições, então se pelo menos um campo não estiver preenchido, exibe a mensagem. Se utilizar o &&, a mensagem só será exibida se TODOS os campos não estiverem preenchidos.
    – Woss
    17/07/2017 às 17:14
  • Verdade! O negócio é somar! :P 17/07/2017 às 17:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .