-3

Olá, estou usando placeholders para mandar as mensagens de erro e sucesso do envio do formulário dentro dos próprios inputs. Os placeholders são cinzas. Quando o formulário é enviado, se houver algum erro, a msg de erro aparece através do placeholder em vermelho. A troca de mensagem está funcionando, mas o estilo CSS dos placeholders não.

Meu código tem PHP no header onde estilizo os placeholders em cinza, em primeiro lugar. Depois, mais abaixo, no body, outro código PHP faz a validação do formulário. Acho que é o PHP no header que está criando o erro, possivelmente errei no escopo das variáveis. É por que as duas partes do código estão separadas?

Podem me dar uma ajuda?

No header:

<?php
   $phname = 'Please, inform your name...';
   $phemail = '...and e-mail';
   $styleName = '.namecolor::-webkit-input-placeholder {color:blue}';
   $styleEmail = '.emailcolor::-webkit-input-placeholder {color:inherit}';
   $phstyle = '<style>'.$styleName.$styleEmail.'</style>';

  echo $phstyle;
?>

Vem o body e então:

<?php //PHP FOR CONTACT     FORM===============================================================
    if(!empty($_POST['bt-submit'])) {                   
        function test_input($data) {
          $data = trim($data);
          $data = stripslashes($data);
          $data = htmlspecialchars($data);
          return $data;
        }

        $destino = "[email protected]";
        $assunto = "Msg from Decoranno website";                        
        $msgErr = "";
        $nome = $de = $mensagem = "";
        $erro = FALSE;

        if ($_SERVER["REQUEST_METHOD"] == "POST")
        {

          if (empty($_POST["txtnome"]))
            {$phname = 'Please inform your name';
            $erro = TRUE;
            $styleName = '.namecolor::-webkit-input-placeholder {color:red}';
            }
          else
            {$nome = test_input($_POST["txtnome"]);
            if (!preg_match("/^[a-zA-Z ]*$/",$nome)) {
                $phname = 'Use only characters and white spaces';
                $_POST['txtnome'] = "";
                $erro = TRUE;
                $styleName = '.namecolor::-webkit-input-placeholder {color:red}';
            }
        }

      if (empty($_POST["txtdest"]))
        {$phemail = 'Please inform your email address';
        $erro = TRUE;
        $styleEmail = '.emailcolor::-webkit-input-placeholder {color:inherit}';
        }
      else
        {$de = test_input($_POST["txtdest"]);
         if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$de)){
             $phemail = 'Sorry, invalid email address';
             $_POST['txtdest'] = "";
             $erro = TRUE;
             $styleEmail = '.emailcolor::-webkit-input-placeholder {color:inherit}';
             }
        }

      if (empty($_POST["txtmsg"]))
        {$msgErr = "Please type your message";
        $erro = TRUE;
        }
      else
        {
            $mensagem = htmlspecialchars_decode(test_input($_POST["txtmsg"]));
            $msgErr = $_POST["txtmsg"]; //Repeat the message already written by the user in case of retry.
        }


        if( $erro == FALSE ){
            if (PATH_SEPARATOR ==":") {
            $quebra = "\r\n";
            } else {
                $quebra = "\n";
                }
            $msgcompleta = "From: ".$nome."<".$de.">".$quebra.$quebra.$mensagem;
            $headers = "MIME-Version: 1.1".$quebra;
            $headers .= "Content-type: text/plain; charset=iso-8859-1".$quebra;
            $headers .= "From: ".$de.$quebra; //E-mail do remetente
            $headers .= "Return-Path: ".$de.$quebra; //E-mail do remetente
            mail($destino, $assunto, $msgcompleta, $headers, "-r". "[email protected]");
            //print "Message successfully sent. Thank you." and reset placeholders on email and name inputs to blank
            $_POST['txtnome'] = $_POST['txtdest'] = $_POST['txtmsg'] = ''; $phname = $phemail = ''; // lets pretend nothing was posted
            $msgErr = 'Message sucessfully sent. Thank you.';
            }
    }
  }
//END OF PHP FOR CONTACT FORM=================================================?>

            <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
                <span>Name</span><input class="text-input namecolor" name="txtnome" type="text" value="<?php echo $_POST['txtnome']; ?>" placeholder="<?php echo $phname; ?>" />
                <span>Email</span><input class="text-input emailcolor" name="txtdest" type="text" value="<?php echo $_POST['txtdest']; ?>" placeholder="<?php echo $phemail; ?>" />
                <textarea name="txtmsg msgcolor" placeholder="We are looking forward to hearing from you"><?php echo $msgErr;?></textarea>
                <input id="bt-send" name="bt-submit" type="submit" value="Send your message" />
            </form>
4
  • 2
    Não creio que o placeholder exista para essa finalidade, ele é apenas uma dica para usuário e não uma mensagem, propriamente dita. Dê uma olhada nesse doc. 1/09/2015 às 14:56
  • Verdade, mas nessa questão da mensagem ele funcionou tão bem que gostei da ideia de usar. Só o estilo que não está funcionando. Vou dar uma olhada no documento que vc sugeriu. Obrigado!
    – Dtag
    1/09/2015 às 14:59
  • E como você mostraria a mensagem em um campo já preenchido(caso o preenchimento estivesse incorreto) ? 1/09/2015 às 15:00
  • Os campos já preenchidos corretamente se mantém preenchidos depois do submit, só os errados são apagados. Mas agora que eu li aquele documento que vc enviou, o problema é que o placeholder pode não aparecer para o usuário. Então acho melhor mudar para label e span mesmo. Ainda assim, estou interessado em saber porque a mensagem não está estilizando.
    – Dtag
    1/09/2015 às 15:03

2 Respostas 2

0

O php é uma linguagem estruturada. Se lá no topo você define um valor e mais abaixo define outro, prevalecerá o último CASO ESSE ÚLTIMO, seja realmente escrito. Verifique se a variável $_POST["txtdest"] realmente fica vazia. Ao invés de utilizar e função empty() faça condições do tipo if ($_POST["txtdest"] == '')) para input. Pois acontece de, as vezes, o header enviar algum valor nos inputs "vazios".

    ...

    if ($_POST["txtdest"] == '')
            {$phemail = 'Please inform your email address';
            $erro = TRUE;
            $styleEmail = '.emailcolor::-webkit-input-placeholder {color:inherit}'; //AQUI NÃO DEVERIA SER RED?????
            }
          else
            {$de = test_input($_POST["txtdest"]);
             if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$de)){
                 $phemail = 'Sorry, invalid email address';
                 $_POST['txtdest'] = "";
                 $erro = TRUE;
                 $styleEmail = '.emailcolor::-webkit-input-placeholder {color:inherit}'; //AQUI NÃO DEVERIA SER RED?????
                 }
            }

     ...
1
  • Eu fiz isso, essa parte está tranquila, mas é o seguinte: o placeholder começa em cinza com a frase "informe seu e-mail". Se o usuário deixar em branco ou colocar um e-mail errado, ele deveria colocar a mensagem "e-mail invalido" e tornar a fonte do placeholder vermelha. Está tudo funcionando, só a troca de cor que não :(. Não sei em que parte do código eu devo alterar a variável $StyleName e $StyleEmail para que isso aconteça
    – Dtag
    1/09/2015 às 18:44
0

Talvez o problema seja que a cor do atributo não esteja pegando por conta da prioridade do bootstrap, você pode usar "!important" para que nenhum css interfira no cor do elemento:

::-webkit-input-placeholder { color:#ff0000!important; }
input:-moz-placeholder { color:#ff0000!important; }

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 .