Ir ao conteúdo
  • Cadastre-se

validação de formulario em JS


Posts recomendados

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.

 

Link para o comentário
Compartilhar em outros sites

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.

Link para o comentário
Compartilhar em outros sites

  • 2 semanas depois...
  • Moderador

@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/

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...