validação de formulario em JS

veiodurio · 25 de setembro de 2014

eu preciso que apareça um alerta sempre que um campo ficar em branco,

mas ja tentei de varias maneiras que achei em sites por ai e nenhum funcionou.

é para um projeto do meu curso

<html><head><link rel="shortcut icon" href="Imagens/incon.ico" ><title>Contato</title><link rel="stylesheet" type="text/css" href="CSS/estilo.css" /></head><body background-color="bleu" ><center><img src="Imagens/banner2.jpg"><center><table border="0" bordercolor="white" width="1000"> <tr align="center"> <td width="16%"> <a href="index.html">       <font face="Impact" >Home                    </font></a> </td><td width="16%"> <a href="quem_somos.html">  <font face="Impact" >Quem somos              </font></a> </td><td width="16%"> <a href="documentarios.html">    <font face="Impact" >Documentários               </font></a> </td><td width="16%"> <a href="localizacao.html"> <font face="Impact">Localização</font></a> </td><td width="16%"> <a href="fatos.html">     <font face="Impact">   Fatos            </font>  </a> </td><td width="16%"> <a href="contato.html">     <font face="Impact">   Contato               </font>  </a> </td> </tr> </table><hr/><font face="Impact" size="6" color="white">CONTATO</font><font face="Arial" size="3" color="white"><br><hr/>Danielle Duarte Duboviski<br>Lucas Gonçalves Lopes<br>Karoline Camargo<br><hr/><!--Inicio formulário -->Conte-nos sua experiência<br><br><form method="post" action="enviar.php" enctype="multipart/form-data"><!--variaveis de configuração--><input type="hidden" name="id" value="pagina contato"><input type="hidden" name="destinatario" value="[email protected]"><input type="hidden" name="from" value="[email protected]"><input type="hidden" name="assunto" value="Contato Site"><input type="hidden" name="pag-erro" value=""><input type="hidden" name="pag-ok" value=""><!--fim variaveisde configuração--><table border="0" bordercolor="white" width="700"><tr ><td> <label><font face="Arial" size="3" color="white">Nome: </font></label></td><td> <input type="text" name="nome" size="50">  </td></tr><tr><td> <label><font face="Arial" size="3" color="white">E-mail: </font></label></td><td> <input type="text" name="email" size="50">  <label></td> </tr><tr><td> <label><font face="Arial" size="3" color="white">Fone:</font> </label></td><td> <input type="text" name="fone" size="50">   </td> </tr><tr><td><font face="Arial" size="3" color="white">Eu sou um:</font></td><td><input type="checkbox" name="C1" value="1"><font face="Arial" size="3" color="white">Homem</font><input type="checkbox" name="C2" value="2"><font face="Arial" size="3" color="white">Mulher</font><input type="checkbox" checked name="C3" value="3"><font face="Arial" size="3" color="white">E.T.</font><input type="checkbox" name="C4" value="4"><font face="Arial" size="3" color="white">Outra coisa...</font></td></tr><tr><td> <label><font face="Arial" size="3" color="white">Foto:</font> </label></td><td> <input type="file" name="arquivo" size="20"></td> </tr></table><label><font face="Arial" size="3" color="white">Assunto: </font></label><select name="assunto" size="1" ><option selected value="valor A">Contato com um ET</option><option value="valor B">Abdução</option><option value="valor C">Outros</option></select><br/><textarea rows="6" cols="50" ></textarea><br/><input type="submit" value="Enviar" name="Submit"><input type="reset" value="Limpar" name="limpar"><br> </form><!--Final formulário --></font></body></html>

agradeço a ajuda.

Anthmann · 25 de setembro de 2014

Olá, @veiodurio.

Vá tentando os das "googladas" abaixo, um de cada vez. Com um pouco de sorte, algum funcionará.

https://www.google.com.br/search?q=javascript+alerta+campo+em+branco

e

https://www.google.com.br/search?q=javascript+warning+empty+field

Boa sorte, e cumprimentos.

DiF · 25 de setembro de 2014

@veiodurio, desculpe-me mas seu código está horrível, muito sujo.

Sobre seu problema, apenas pesquise sobre como utilizar ajax, a cada requisição quando deixar o foco de um campo ele verifica se o mesmo está vazio.

veiodurio · 8 de outubro de 2014

@dif , realmente eu baguncei o código, aponto de me perder nele, não sou bom com JS

DiF · 8 de outubro de 2014

@veiodurio, anteriormente falei que podias pesquisar sobre ajax, mas pensando agora se você não está utilizando o php para retornar dados .. então o ajax não serve para esse caso.

Com isso dá para resolver usando jQuery(javascript), utilizando a função blur() que é quando um elemento perde o foco.. dispara o alert.

Para fazer isso você precisa der uma leve noção de HTML, CSS e jquery. vamos a mágica:

HTML

<input type="text" class="inp"  placeholder="campo 1"/><label for="campo 1">campo 1</label><input type="text" class="inp"  placeholder="campo 2"/><label for="campo 2">campo 2 </label>

Foi preciso utilizar a tag label

CSS

input+label { display: none; }

Ele esconte a label( que só é usada para pegar o nome do campo)

A mágica no jQuery:

$(document).ready(function(){    $('input[type="text"]').blur(function() {        var campo = $(this).attr('placeholder');        alert('O '+ campo + ' está vazio');    });    });

Nos campos de texto, quando perde o foco( função blur() ), o alert é disparado dizendo qual campo perdeu o foco e está vazio..

Mas, tudo tem um porém, há um erro nisso, independente se está vazio ou não, ele mostra o alert logo que o campo perder o foco.. pra resolver isso.. vai ter que por uma condição dentro da função blur chamada ali.. para testar se o campo atual está com valor ou vazio.... mas isso eu deixo para você.

estude um pouco que vai conseguir!

ps: veja o exemplo online http://jsfiddle.net/gky736x8/