Jump to content

Recommended Posts

Saudações Kneon Nights!

 

Gostaria de fazer minha contribuição pela boa vontade de todos que se disponibilizam, sem nenhum custo, a transmitir conhecimentos essenciais seja para a evolução ou ganha-pão de muitos que dependem deste universo de informações.

 

Bom, o sisteminha na realidade surgiu quando ao futucar um script de validação encontrado na rede terminei, na cagada, criando outro melhor ainda. E agora ele está aqui para quem quiser utilizar.

 

COMO FUNCIONA?

1. A pessoa aperta o botão enviar sem preencher nada (gaiaata!). Só que aqui não mérmão aqui não entra nada, o sistema barra logo trote por:

a) não enviar a mensagem (âââ, lógico!), porém, fazendo o primeiro campo (no caso do form abaixo o campo nome) do formulário ficar vermelho e informando através de uma mensagem vermelha que este campo precisa ser preenchido;

 

2. Ao clicar no campo nome, este, volta a cor normal como se nada tivesse acontecido;

 

EU: - O mesmo ocorre com os demais campos: ao preencher o campo nome e enviarem a mensagem, o campo seguinte fica vermelho, surge a mensagem vermelha informando que tal campo precisa ser preenchido e assim sucessivamente.

FDP: - Brother, qualquer validador faria isso me conte uma novidade, onde entra a parada da inteligência aí?

 

EU: - Calma jhow, relaxe, entra agora!

 

3. Se a pessoa tentar preencher apenas um campo por exemplo mensagem ou email, AUTOMATICAMENTE o cliques que ela der nesses campos serão direcionados para o campo nome. O mesmo acontecerá caso o campo nome seja preenchido certinho e ela clica no campo mensagem, automaticamente o clique dela neste campo será direcionado para o campo email e assim sucessivamente.

 

CONSIDERAÇÕES:

Esta funcionalidade obriga a pessoa a preencher campo por campo, prendendo-a ao primeiro campo, ao segundo e assim sucessivamente EVITANDO que todo o formulário seja enviado incompleto.

 

O FORMULÁRIO (HTML)

Pode ser qualquer outro, basta apenas configurá-lo ao script.

 

<form class="form" id="form1" action="(AQUI O ARQUIVO PHP QUE ENVIA)" method="POST">
<p class="name">
<input name="name" type="text" class="" placeholder="" id="name" onClick="return apagar()"/>
</p>
<p class="email">
<input name="email" type="text" class="" placeholder="" id="email" onClick="return apagar()" /> </p>
<p class="text">
<textarea name="text" class="" placeholder="" id="comment" onClick="return apagar()" ></textarea>
</p>
<div class="submit">
<div id="msg"></div>
<input type="submit" value="Enviar Mensagem" class="submit" onclick="return validar()" onSubmit="LimarCampo()"/>
</div>
</form>
O SCRIPT (JS)
<script type="text/javascript">
function validar() {
var name = form1.name.value;
if (name == "") {
var cont = "Informe seu nome";
document.getElementById("msg").innerHTML = cont;
form1.name.style.backgroundColor="#FFDAB9";
form1.name.style.color="#363636";
msg.style.color="#ff0000";
form1.name.focus();
return false;
}
var email = form1.email.value;
if (email == "") {
var cont = "Informe seu e-mail";
document.getElementById("msg").innerHTML = cont;
form1.email.style.backgroundColor="#FFDAB9";
form1.email.style.color="#363636";
msg.style.color="#ff0000";
form1.email.focus();
return false;
}
var text = form1.text.value;
if (text == "") {
var cont = "Digite sua mensagem";
document.getElementById("msg").innerHTML = cont;
form1.text.style.backgroundColor="#FFDAB9";
form1.text.style.color="#363636";
msg.style.color="#ff0000";
form1.text.focus();
return false;
}
}
function apagar() {
var name = form1.name.value;
if (name == "") {
var cont = "";
document.getElementById("msg").innerHTML = cont;
form1.name.style.backgroundColor="#fbfbfb";
form1.name.style.color="#363636";
form1.name.focus();
return false;
}
var email = form1.email.value;
if (email == "") {
var cont = "";
document.getElementById("msg").innerHTML = cont;
form1.email.style.backgroundColor="#fbfbfb";
form1.email.style.color="#363636";
form1.email.focus();
return false;
}
var text = form1.text.value;
if (text == "") {
var cont = "";
document.getElementById("msg").innerHTML = cont;
form1.text.style.backgroundColor="#fbfbfb";
form1.text.style.color="#363636";
form1.text.focus();
return false;
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#form1').submit(function(){
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "../(AQUI O ARQUIVO PHP QUE ENVIA)",
data: dados,
success: function envio()
{
var cont = "Mensagem enviada com sucesso";
document.getElementById("msg").innerHTML = cont;
msg.style.color="#55A13C";
}
});
return false;
});
});
</script>
Coloquei as cores para facilitar a identificação no script e possíveis alterações para outras necessidades.
Lembrando que as mensagens e as cores dos campos são modificadas no script acima, não no css.
Veja o exemplo em minha página http://bamboo.16mb.com/nossos-contatos
  • +1 1

Share this post


Link to post
Share on other sites

Cara cabei de testar o seu formulário no seu site e enviei de forma erroneamente e o seu form aceitou na boa o envio com preenchimento incorreto no campo email.. escrevi isso aqui no campo email "renssiaa" vc tem que configurar esse campo.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By liniker.o
      Boa tarde pessoal!
      Estou com um problema em meu código quando coloco uma referencia de fonte a mesma não carrega, quando faça o mesmo procedimento local colocando os caminhos de pasta funciona normalmente.
      Será que alguém poderia me ajudar?
      Segue o código.
      <html> <head> <title>Minha pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- Se não declarar charset por meta, envie um header de igual valor --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <?php //Carregar imagem tamanho da imagen = 515x76 $img = ImageCreateFromJPEG("base.jpg"); //Definir cor $cor1 = imagecolorallocate($img, 0, 0, 0); $cor2 = imagecolorallocate($img, 0, 0, 0); // carregar fonte... $fonte1 = 'https://ff.static.1001fonts.net/r/o/roboto-condensed.light.ttf'; $fonte2 = 'https://ff.static.1001fonts.net/r/o/roboto-condensed.light.ttf'; //Escrever nome $txtNome = $_POST['nome']; $txtFuncao = $_POST['func']; $txtEmail = $_POST['email']; $txtDDD = "+55 ".$_POST['telefone']; // IMAGEM, TAMANHO_FONTE, 0, POSICAO X, posicao Y, TEXTO_COR, ARQ_FONTE, TEXTO imagettftext($img, 32, 0, 250, 100, $cor1, $fonte1, $txtNome); imagettftext($img, 18, 0, 250, 125, $cor1, $fonte2, $txtFuncao); imagettftext($img, 18, 0, 250, 150, $cor1, $fonte2, $txtEmail); imagettftext($img, 18, 0, 250, 180, $cor1, $fonte2, $txtDDD); //Header e output header('Content-type: image/jpeg'); imagejpeg($img,"Assinatura - ".$txtNome.".jpg"); imagedestroy($img); header('Location: Assinatura - '.$txtNome.'.jpg'); ?>  
    • By jranesio
      Estou com problemas com script PHP e cURL para:
      1 - logar no site
      2 - acessar formulario de pesquisa e passar os dados
      3 - receber a página de resposta html
      Itens 1 e 2 estão OK, obtenho a resposta (item 3).
      Alguém pode orientar onde estou errando? Segue script.
      Obrigado
       
       
      <?php
       
      $cookie = dirname(__FILE__).'/cookie.txt';
      $url1='http://clima.feis.unesp.br/login.php'; //página de login
      $url2='http://clima.feis.unesp.br/dados_diarios.php'; //formulario de pesquisa
      $url3='http://clima.feis.unesp.br/recebe_formulario.php'; //Resultado esperado
      $username = 'usuario=siteteste';
      $password = 'senha=testesite';
      $dadosform= [ 'dataini' => '01/01/2020',
      'datafim' => '01/03/2020',
      'estacao' => '1'
      ];
      $useragent='Mozilla/5.0 (Windows NT 6.2) AppleWebKit/536.6 (KHTML, like Gecko) Chrome/20.0.1090.0 Safari/536.6';
      $ch = curl_init($url2);
      curl_setopt_array($ch, [
                              CURLOPT_COOKIESESSION => 1,
                              CURLOPT_COOKIEJAR => $cookie,
                              CURLOPT_COOKIEFILE => $cookie,
                              CURLOPT_USERAGENT => $useragent,
                              CURLOPT_AUTOREFERER => 1,
                              CURLOPT_URL => $url2,
                              CURLOPT_POST => 1,
                              CURLOPT_RETURNTRANSFER => 1,
                              CURLOPT_FOLLOWLOCATION => 0,
                              CURLOPT_USERPWD => $username.":".$password,
                              CURLOPT_VERBOSE => 1 ,
                              CURLINFO_HEADER_OUT => 1,
                              CURLOPT_POSTFIELDS => $dadosform,
      ]);
      $resultado = curl_exec($ch);
      $errno = curl_errno($ch);
      echo "<br>Login: ". curl_strerror($errno).'<hr>';
      echo '<hr>';
      if($errno == 0) {
          print_r($resultado);
      }

      curl_close($ch);
      echo '<br>[FIM]';
       
    • By fjuniorlira
      Pessoal estou construindo essa página: http://webe.cf/teste-cadastro Preciso que que no input "Conta" o dígito fique na mesma linha. Como posso fazer isso?
      SEGUE O CÓDIGO:
       
      <p> <span style="font-family: Arial, Helvetica, sans-serif; color: rgb(51, 51, 51); font-weight: bold;">Conta:</span></big> <span style="color: rgb(255, 0, 0); font-weight: bold;">*</span><br/> <input type="text" required="required" size="35" name="conta" onkeypress="formatar('####-#', this)" pattern="[0-9.-]+$" maxlength="9" style="width: 300px; height: auto; font-family: Arial; font-size: 16px"> </p> <p> <span style="font-family: Arial, Helvetica, sans-serif; color: rgb(51, 51, 51); font-weight: bold;"></span></span> <input type="text" required="required" size="35" name="digito" onkeypress="formatar('####-#', this)" pattern="[0-9.-]+$" maxlength="9" style="width: 39px; height: auto; font-family: Arial; font-size: 16px"> </p>  
    • By kaioneresm
      Olá, tenho um form que pede um codigo enviado por email para o usuário confirmar, essa mesma pagina já está gerada o código dentro de uma variável. 
      O que eu preciso é que no momento que o usuário digitar o codigo nesse input text que é composto de 6 digitos, o botão submit habilite (mas somente se o que foi digitado corresponder a variavel). 
       
      Segue abaixo o meu Form.
       
      <input type="text" class="textenv" maxlength="6" placeholder="Digite o código enviado:"></input> <button type="submit" class="btncria" >Confimar<font color="#fff"></font></button> Alguem sabe como utilizar js nesse caso? Muito obrigado!!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.