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 victorhupo
      Eu tenho um código html e quero que a partir de um formulário o javascript modifique o conteúdo dele porem tenho um conhecimento raso.
       o código seria esse.
      <textarea> <div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="901" data-original-width="1600" src="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" /></a></div> </textarea> eu preciso que a partir do link q o usuário colocar no formulário ele substitua esse link de imagem pelo que foi colocado na tabela. alguém tem alguma solução?
    • By Aureo Almeida
      Possuo um formulário que está repassando parte dos dados que desejo enviar. Ele busca o resultado de três consultas e duas delas dão opções de seleção para  o usuário em input radio.
      A primeira busca informações de produtos selecionados a partir de um parâmetro recebido via post. Este mesmo parâmetro também estabelece um critério para as outras duas consultas.
      Todas elas funcionam adequadamente, sem problemas. A questão é que ao enviar o formulário somente os dois parâmetros que estão presentes em inputs hidden são enviados. Os dois inputs radio, que são preenchidos de acordo com determinados critérios, não.
      Este é o código do formulario:
      <form action="carrinho.php" method="post"> <?php //Recebe a variavel idproduto da página do produto $sub_id = $_POST['idproduto']; $sql = "SELECT * FROM psd_produtos Where prd_id = '$sub_id'"; $stmt = $conn->prepare($sql); $stmt->execute(); $dados= $stmt->fetchAll(PDO::FETCH_OBJ); foreach ($dados as $detProdutos): $prdid = $detProdutos->prd_id; $nome= $detProdutos->prd_nome; $valor = $detProdutos->prd_valor; $novovalor = number_format($valor, 2, ',', '.'); $quantidade = $detProdutos->prd_estoque; echo" <h2>PREÇO: R$ $novovalor</h2><br/> <input type='hidden' name='id' value='$prdid'> <input type='hidden' name='acao' value='add'> "; endforeach; $sql1 = "SELECT * FROM psd_cores WHERE prd_id = '$sub_id'AND crs_quantidade != '0'"; $stmt1 = $conn->prepare($sql1); $stmt1->execute(); $dados1= $stmt1->fetchAll(PDO::FETCH_OBJ); foreach ($dados1 as $prodCores): if($quantidade!= 0){ echo" <input type='radio' name='cor' id='cor' value='$prodCores->crs_cores' checked='checked'> $prodCores->crs_cores <br> ";} endforeach; $sql2 = "SELECT * FROM psd_sabores WHERE prd_id = '$sub_id'AND sbr_quantidade != '0'"; $stmt2 = $conn->prepare($sql2); $stmt2->execute(); $dados2= $stmt2->fetchAll(PDO::FETCH_OBJ); foreach ($dados2 as $prodSabores): if($quantidade!= 0){ echo" <input type='radio' name='sabor' id='sabor 'value='$prodSabores->sbr_sabor' checked='checked'> $prodSabores->sbr_sabor <br> ";} endforeach; ?> <input type='submit' class='imput-comprar' value='Comprar'> </form> O estranho é que se eu fizer um formulário com uma das  consultas isoladamente da demais, os parâmetros são enviados. Exemplo que funciona:
      <form action="carrinho.php" method="post"> $sql2 = "SELECT * FROM psd_sabores WHERE prd_id = '$sub_id'AND sbr_quantidade != '0'"; $stmt2 = $conn->prepare($sql2); $stmt2->execute(); $dados2= $stmt2->fetchAll(PDO::FETCH_OBJ); foreach ($dados2 as $prodSabores): if($quantidade!= 0){ echo" <input type='radio' name='sabor' id='sabor 'value='$prodSabores->sbr_sabor' checked='checked'> $prodSabores->sbr_sabor <br> ";} endforeach;?> <br><input type='submit' class='imput-comprar' value='Comprar'> </form> O que pode estar impedindo que os valores das duas consultas após a primeira não sejam enviadas em conjunto, somente isoladamente?
    • By andre2654
      Boa tarde, eu preciso de ajuda de vocês, estou com um problema que é o seguinte, eu preciso que quando a pessoa clicar na lixeira, exclua essa linha do banco de dados, mas como posso fazer? perdoem a minha inexperiência, mas já busquei bastante a respeito e nada.
    • By Raphael Beghelli Ribeiro
      Prezados,

      Tenho um formulário de busca, onde um INPUT recebe informações de um Banco de Dados.
      No Android, esta tudo funcionando 100%. Porém, no IoS, ele só marca o primeiro item da lista de busca.
      <div id="local"> <font>QUAL BAIRRO, CIDADE OU CÓDIGO?</font> <input name="psqm" id="psqm" type="text" placeholder="DIGITE O BAIRRO, A CIDADE OU O CÓDIGO" autocomplete="off" /> </div> Após preencher todos os campos anteriores, tento digitar por exemplo: Jardim

      na listagem, aparece:
      Jardim América;
      Jardim Santa Lucia;
      Jardim Santos;
      Outros...
       
      Independente de onde clicar, apenas o primeiro item ("Jardim América") é selecionado.

      Alguma dica? Lembrando que este erro é apenas no iPhone.
    • By kriskastro
      Oi, pessoal. Preciso de uma ajuda de vocês. 
      Tenho esse código de formulário de contato em um dos sites que gerencio e preciso colocar um redirecionamento de URL ao submeter o envio do formulário com sucesso. Atualmente ele só exibe "Mensagem enviada com sucesso!". Já tentei injetar essa função direto pelo javascript, porém as tentativas que fiz foram todas sem sucesso. Podem me ajudar com isso?
       
      A ideia seria enviar as pessoas para uma página de resposta que já desenvolvi.
      <form class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse"> <fieldset> <p id="element_avia_1_1" class=" first_form form_element form_element_third"><label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label> <input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" /></p> <p id="element_avia_2_1" class=" form_element form_element_third"><label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label> <input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" /></p> <p id="element_avia_3_1" class=" form_element form_element_third"><label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label> <input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" /></p> <p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element"><label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label> <textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7"></textarea></p> <p class="hidden"><input id="avia_5_1" class="hidden " name="avia_5_1" type="text" value="" /></p> <center id="msgErroHouse" style="color: red; display: none;">Erro ao enviar a mensagem, preencha todos os campos para continuar</center>&nbsp; <center id="msgShowHouse" style="display: none;">Mensagem enviada com sucesso!</center> <p class="form_element "><input name="avia_generated_form1" type="hidden" value="1" /> <input id="clica-botao-house" class="button" type="button" value="Enviar" /></p> </fieldset> </form> <script language="javascript"> function chama(){ var ret = hc_envia_mensagem(2923, document.formhouse.nome.value, document.formhouse.email.value, '', document.formhouse.telefone.value, document.formhouse.mensagem.value); if(document.formhouse.email.value.trim() != '' && document.formhouse.nome.value.trim() != ''){ jQuery('#msgErroHouse').hide(); jQuery('#msgShowHouse').show(); document.formhouse.nome.value = ''; document.formhouse.email.value = ''; document.formhouse.ddd.value = ''; document.formhouse.telefone.value = ''; document.formhouse.mensagem.value = ''; }else{ jQuery('#msgShowHouse').hide(); jQuery('#msgErroHouse').show(); } } setTimeout(function(){ jQuery('#clica-botao-house').on('click', function(){chama ()}); jQuery('[data-avia-form-id]').hide(); },100) </script>  
×

Important Information

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