Olá amigos, hoje em dia um dos usos mais comuns na programação JavaScript com certeza é a validação de campos, isso porque não precisamos direcionar o usuário para uma nova página, a validação é feita via Browser, ou seja, o resultado da validação é exibido em um alert.
O nosso formulário terá os seguintes campos:
- Nome
- E-Mail
- Idade
- Endereço
- Telefone
- Data de Nascimento
- Senha
- Confirmação de Senha
- Sexo
Este é o código do formulário:
<html>
<head>
<title> Cadastro com Validação </title>
</head>
<body>
<form>
Nome: <input type="text" name="nome"><br><br>
E-mail: <input type="text" name="email"><br><br>
Idade: <input type="text" name="idade" maxlength="2" size="2"><br><br>
Endereço: <input type="text" name="endereco"><br><br>
Telefone: <input type="text" name="tel" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
Data de Nascimento: <input type="text" name="data_nascimento"><br><br>
Senha: <input type="password" name="senha"> (Mínimo: 6 caracteres)<br><br>
Confirmação de Senha: <input type="password" name="conf_senha"><br><br>
Sexo: <input type="radio" name="sexo" value="masc"> Masculino <input type="radio" name="sexo" value="fem"> Feminino<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Como nós queremos que o formulário seja validado ao enviá-lo, vamos usar o evento onsubmit na tag form. O nome da função JavaScript que usaremos para validar será "valida", e se houver algum erro, ela retornará false, caso contrário, retornará true. Vamos adicionar na tag form: onsubmit="return valida(this);", ela deve estar assim:
<form onsubmit="return valida(this);">
O argumento (this) enviado para a função é o próprio formulário, ou seja, o argumento recebido pela função será o formulário, isso facilitará o acesso à seus campos.
Agora vamos criar a nossa função. Na tag <head>, digite:
<script>
function valida(form) {
}
</script>
Vamos começar validando o nome. A validação do nome é muito simples, ela apenas não pode estar em branco. Aí está o código da validação do nome, ele será explicado logo abaixo:
if (form.nome.value=="") {
alert("Preencha o nome corretamente.");
form.nome.focus();
return false;
}
A primeira linha começa uma condição, ela puxa o campo, usando form para usar o formulário passado para a função, nome para pegar o campo, e value pagar pegar o valor do campos, e verifica se o valor é nulo. Se for, ele alerta o cliente, coloca o foco no campo Nome e retorna false.
Agora vamos validar o e-mail. Vamos usar regular expression. Aqui está a validação do e-mail:
var filtro_mail = /^.+@.+\..{2,3}$/
if (!filtro_mail.test(form.email.value) || form.email.value=="") {
alert("Preencha o e-mail corretamente.");
form.email.focus();
return false;
}
A primeira linha cria uma expressão regular que exige o formato de um e-mail. A segunda linha testa o campo e-mail para ver se ela está nos padrões do filtro. Se não estiver, alerta o cliente, coloca o foco no campo e-mail e retorna falso.
Para validar a idade, precisaremos de outra função chamada IsNum, que verifica se um valor é número ou não. Aqui está esta função, coloque-a antes da função valida:
function IsNum(v)
{
var ValidChars = "0123456789";
var IsNumber=true;
var Char;
for (i = 0; i < v.length && IsNumber == true; i++)
{
Char = v.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
Agora vamos validar a idade:
if (form.idade.value=="" || !IsNum(form.idade.value)) {
alert("Preencha a idade corretamente.");
form.idade.focus();
return false;
}
Na primeira linha a função verifica se a idade é vazio ou se ela não é número.
Se alguma dessas condições for verdadeira (vazio ou não número) ela alerta o cliente, coloca o foco no campo idade e retorna false.
Agora o endereço. Aqui está:
if (form.endereco.value=="" || form.endereco.value.length < 8) {
alert("Preencha o endereço corretamente.");
form.endereco.focus();
return false;
}
Aqui é basicamente a mesma coisa: a função verifica se o campo está vazio, ou se o número de caracteres no valor dele (.length) é menor que 8. Se alguma dessas condições for verdadeira, a função alerta o cliente, coloca o foco no campo endereço e retorna false.
A verificação do telefone é bastante simples, só é preciso verificar se ele está nulo, pois faremos outra função para formatar o telefone mais tarde.
if (form.tel.value=="") {
alert("Preencha o telefone corretamente.");
form.tel.focus();
return false;
}
Acho que não precisa de explicações nesta parte.
A data de nascimento, como foi informado no formulário, tem que ter este formato: dd/mm/aaaa, ou seja, é obrigatório que tenha 10 caracteres, então nós vamos apenas verificar se está nulo ou se tem caracteres diferentes de 10:
if (form.data_nascimento.value=="" || form.data_nascimento.value.length != 10) {
alert("Preencha a data de nascimento corretamente.");
form.data_nascimento.focus();
return false;
}
A senha e a confirmação de senha tem validações iguais, ambas não podem estar nulas e tem que ter 6 caracteres ou mais. Aqui está a validação de ambas:
if (form.senha.value=="" || form.senha.value.length < 6) {
alert("Preencha a senha corretamente.");
form.senha.focus();
return false;
}
if (form.conf_senha.value=="" || form.conf_senha.value.length < 6) {
alert("Preencha a confirmação de senha corretamente.");
form.conf_senha.focus();
return false;
}
Agora, vamos verificar se a senha e sua confirmação estão iguais:
if (form.senha.value!=form.conf_senha.value) {
alert("A senha e a confirmação tem de ser iguais.");
form.conf_senha.focus();
return false;
}
Agora a última parte das validações, o sexo. Quando nós usamos form.sexo, nos retorna uma array com os campos radio. Para que o cliente possa continuar, ou a form.sexo[0](a primeira) ou a form.sexo[1](a segunda) tem que estar checked (checked==true), para isso, verificaremos se as duas não estão checked, se for verdadeiro, ocorre erro, se não, o cliente prossegue:
if (form.sexo[0].checked==false && form.sexo[1].checked==false) {
alert("Selecione o sexo.");
return false;
}
}
Agora, no campo data de nascimento, vamos fazer com que, se o campo estiver vazio, apareça "dd/mm/aaa" ao invés de nada. O seu campo deve ficar assim:
Data de Nascimento: <input type="text" name="data_nascimento" value="dd/mm/aaaa" maxlength="10" onfocus="if (this.value=='dd/mm/aaaa'){this.value='';}" onblur="if (this.value==''){this.value='dd/mm/aaaa';}"><br><br>
Acabamos a função valida, agora vamos criar a função telefone. Seu código deve estar assim até agora:
<html>
<head>
<title> Cadastro com Validação </title>
<script>
function IsNum(v)
{
var ValidChars = "0123456789";
var IsNumber=true;
var Char;
for (i = 0; i < v.length && IsNumber == true; i++)
{
Char = v.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
function valida(form) {
if (form.nome.value=="") {
alert("Preencha o nome corretamente.");
form.nome.focus();
return false;
}
var filtro_mail = /^.+@.+\..{2,3}$/
if (!filtro_mail.test(form.email.value) || form.email.value=="") {
alert("Preencha o e-mail corretamente.");
form.email.focus();
return false;
}
if (form.idade.value=="" || !IsNum(form.idade.value)) {
alert("Preencha a idade corretamente.");
form.idade.focus();
return false;
}
if (form.endereco.value=="" || form.endereco.value.length < 8) {
alert("Preencha o endereço corretamente.");
form.endereco.focus();
return false;
}
if (form.tel.value=="") {
alert("Preencha o telefone corretamente.");
form.tel.focus();
return false;
}
if (form.data_nascimento.value=="" || form.data_nascimento.value.length != 10) {
alert("Preencha a data de nascimento corretamente.");
form.data_nascimento.focus();
return false;
}
if (form.senha.value=="" || form.senha.value.length < 6) {
alert("Preencha a senha corretamente.");
form.senha.focus();
return false;
}
if (form.conf_senha.value=="" || form.conf_senha.value.length < 6) {
alert("Preencha a confirmação de senha corretamente.");
form.conf_senha.focus();
return false;
}
if (form.senha.value!=form.conf_senha.value) {
alert("A senha e a confirmação tem de ser iguais.");
form.conf_senha.focus();
return false;
}
if (form.sexo[0].checked==false && form.sexo[1].checked==false) {
alert("Selecione o sexo.");
return false;
}
}
</head>
<body>
<form onsubmit="return valida(this);">
Nome: <input type="text" name="nome"><br><br>
E-mail: <input type="text" name="email"><br><br>
Idade: <input type="text" name="idade" maxlength="2" size="2"><br><br>
Endereço: <input type="text" name="endereco"><br><br>
Telefone: <input type="text" name="tel" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
Data de Nascimento: <input type="text" name="data_nascimento" value="dd/mm/aaaa" maxlength="10" onfocus="if (this.value=='dd/mm/aaaa'){this.value='';}" onblur="if (this.value==''){this.value='dd/mm/aaaa';}"><br><br>
Senha: <input type="password" name="senha"> (Mínimo: 6 caracteres)<br><br>
Confirmação de Senha: <input type="password" name="conf_senha"><br><br>
Sexo: <input type="radio" name="sexo" value="masc"> Masculino <input type="radio" name="sexo" value="fem"> Feminino<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Logo abaixo da função valida, crie a função telefone, com o argumento f (form):
function telefone(f) {
}
Nós queremos que esta função seja ativada quando você tirar o foco do campo telefone (OnBlur), então edite o seu campo telefone para que ele fique assim:
Telefone: <input type="text" name="tel" onblur="telefone(this.form);" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
O argumento passado (this.form) passa para a função o formulário atual, para facilitar o acesso aos campos.
O que esta função fará: ela editará o telefone para que ele fique nesta formato: (ddd) tele-fone.
Como o telefone pode ter 7 ou 8 digitos, com o DDD, o campo deve ter 9 ou 10 caracteres, caso contrário, não poderá ser feita a formatação, então coloque isso na função:
if (f.tel.value.length<9 || f.tel.value.length>10) {
alert("Preencha o telefone corretamente.");
f.tel.focus();
}else{
}
Dentro do bloco else vai o código que será executado caso o número esteja correto. A partir de agora escreva tudo dentro do bloco else. Agora nós precisamos pegar o DDD escrito. Sabemos que o DDD são os dois primeiros caracteres do campo, para isso, usamos a função substring:
ddd = f.tel.value.substring(0,2);
Ele pega os caracteres do 0 ao 2. Agora nós precisamos identificar a primeira e a segunda parte do telefone, para separarmors com hífen. Mas, como o telefone pode ter 7 ou 8 digitos (9 ou 10 caracteres com o DDD), precisamos fazer uma verificação, e dependendo do número de caracteres, pegar certa parte do campo:
if (f.tel.value.length==9) {
part1 = f.tel.value.substring(2,5);
part2 = f.tel.value.substring(5,9);
}
if (f.tel.value.length==10) {
part1 = f.tel.value.substring(2,6);
part2 = f.tel.value.substring(6,10);
}
Com isso já temos as partes que precismaos, agora só precisamos escrevê-las no campo formatadas:
f.tel.value = "("+ddd+") "+part1+"-"+part2
Caso o telefone digitado seja 1125885236, aparecerá isto no campo ao tirar o foco dele: (11) 2588-5236.
É isso gente, qualquer dúvida é só comentar, postar no fórum ou me mande um e-mail para augustoclaro1@hotmail.com
Aqui está o código final completo:
<html>
<head>
<title> Cadastro com Validação </title>
<script>
function IsNum(v)
{
var ValidChars = "0123456789";
var IsNumber=true;
var Char;
for (i = 0; i < v.length && IsNumber == true; i++)
{
Char = v.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
function valida(form) {
if (form.nome.value=="") {
alert("Preencha o nome corretamente.");
form.nome.focus();
return false;
}
var filtro_mail = /^.+@.+\..{2,3}$/
if (!filtro_mail.test(form.email.value) || form.email.value=="") {
alert("Preencha o e-mail corretamente.");
form.email.focus();
return false;
}
if (form.idade.value=="" || !IsNum(form.idade.value)) {
alert("Preencha a idade corretamente.");
form.idade.focus();
return false;
}
if (form.endereco.value=="" || form.endereco.value.length < 8) {
alert("Preencha o endereço corretamente.");
form.endereco.focus();
return false;
}
if (form.tel.value=="") {
alert("Preencha o telefone corretamente.");
form.tel.focus();
return false;
}
if (form.data_nascimento.value=="" || form.data_nascimento.value.length != 10) {
alert("Preencha a data de nascimento corretamente.");
form.data_nascimento.focus();
return false;
}
if (form.senha.value=="" || form.senha.value.length < 6) {
alert("Preencha a senha corretamente.");
form.senha.focus();
return false;
}
if (form.conf_senha.value=="" || form.conf_senha.value.length < 6) {
alert("Preencha a confirmação de senha corretamente.");
form.conf_senha.focus();
return false;
}
if (form.senha.value!=form.conf_senha.value) {
alert("A senha e a confirmação tem de ser iguais.");
form.conf_senha.focus();
return false;
}
if (form.sexo[0].checked==false && form.sexo[1].checked==false) {
alert("Selecione o sexo.");
return false;
}
}
function telefone(f) {
if (f.tel.value.length<9 || f.tel.value.length>10) {
alert("Preencha o telefone corretamente.");
f.tel.focus();
}else{
ddd = f.tel.value.substring(0,2);
if (f.tel.value.length==9) {
part1 = f.tel.value.substring(2,5);
part2 = f.tel.value.substring(5,9);
}
if (f.tel.value.length==10) {
part1 = f.tel.value.substring(2,6);
part2 = f.tel.value.substring(6,10);
}
f.tel.value = "("+ddd+") "+part1+"-"+part2
}
}
</script>
</head>
<body>
<form onsubmit="return valida(this);">
Nome: <input type="text" name="nome"><br><br>
E-mail: <input type="text" name="email"><br><br>
Idade: <input type="text" name="idade" maxlength="2" size="2"><br><br>
Endereço: <input type="text" name="endereco"><br><br>
Telefone: <input type="text" name="tel" onblur="telefone(this.form);" maxlength="10"> (Formato: DDD+TELEFONE: 1122223333)<br><br>
Data de Nascimento: <input type="text" name="data_nascimento" value="dd/mm/aaaa" maxlength="10" onfocus="if (this.value=='dd/mm/aaaa'){this.value='';}" onblur="if (this.value==''){this.value='dd/mm/aaaa';}"><br><br>
Senha: <input type="password" name="senha"> (Mínimo: 6 caracteres)<br><br>
Confirmação de Senha: <input type="password" name="conf_senha"><br><br>
Sexo: <input type="radio" name="sexo" value="masc"> Masculino <input type="radio" name="sexo" value="fem"> Feminino<br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Obrigado.
Augusto Claro
quarta-feira,30 de dezembro de 2009
79481 Vizualizações
Sensacional!
24/04/2010 - 16:30, Rodrigo Andrade | #
Existem várias soluções perdidas na internet, mas esta está completíssima e muito bem comentada. Parabéns! Aproveito para perguntar como ficaria o código se eu quisesse bloquear ou filtrar a digitação de letras e/ou caracteres inválidos no campo do telefone.
Obrigado!
Excelente
17/07/2010 - 08:49, Thiago | #
Caraka.....excelente a sua aula, completissima. Parabens
tirar uma dúvida
25/02/2011 - 20:01, anderson | #
neste formulário como eu valido um menu de lista como o item abaixo:
<select name="anuncio" id="anuncio">
<option>Escolha </option>
<option>Banner 01</option>
<option>Banner 02</option>
<option>Banner 03</option>
<option>anuncie</option>
</select>
obrigado
qual o código para eu validar no caso.
Resposta
14/03/2011 - 16:03, Augusto Claro | #
Eae
para validar um select você usa o .value do mesmo jeito que um campo de texto. Mas para isso você tem que colocar um value="" em cada <option>.
Ex:
<select name="anuncio" id="anuncio">
<option value="">Escolha </option>
<option value="Banner 1">Banner 01</option>
<option value="Banner 2">Banner 02</option>
<option value="Banner 3">Banner 03</option>
<option value="Anuncie">anuncie</option>
</select>
E no javascript:
<script>
if (formulario.anuncio.value == ""){
alert("Escolha uma opção");
}else{
alert(formulario.anuncio.value);
}
}
</script>
Demais cara
13/07/2011 - 14:44, Maycon Tavares | #
Cara, demais, fiquei dias procurando algo assim, e pego, e vejo o seu totalmente comentado.
Está de parabéns pelo tutorial cara!
PARABÉNS
18/08/2011 - 15:04, EJAVAWEB | #
Parabéns!!
Falha na validação do Nome
04/11/2011 - 19:07, ?????????? | #
Basta digitarmos números, outros símbolos(*/?@...) e até mesmo espaços que o código falha e valida o formulário com dados incorretos.
Você poderia criar um código + robusto que bloqueasse a inserção de caracteres incompatíveis com nomes, por favor?
Outra dica q acabei de descobrir.
Seu código que analisa os emails tb falha. Digitei um mail válido e ele não validou.
Acho q vc deveria trocar de autor.
Seus códigos têm mtas falhas!
04/11/2011 - 19:10, | #
Repleto de falhas.
Troque de autor.
Aprende com quem realmente sabe.
é só uma dica.
Um grande Abraço
Cheio de falhas
04/11/2011 - 19:13, | #
Cheio de falhas mesmo
duvida
10/11/2011 - 14:37, Kaos | #
Eu fiz um js mas não consigo validar os campos, ele ficou assim:
<script>
function validar (){
if (document.form.nome.value==""){
alert("Digite o nome")}
if (document.form.telefone.value==""){
alert("Digite o telefone")}
if (document.form.escreva.value==""){
alert("Digite um comentário")}
}
</script>
<html>
<head>
<meta charset ="utf-8">
<title></title>
<script language="javascript"></script>
</head>
<body>
<form align ="center" name ="form" onsubmit ="validar()">
<center><h2>DEIXE UM COMENTÁRIO</h2><br>
Nome:
<input type="text" name="nome" size="80"><br>
Telefone:
<input name="telefone" id="numero" onKeyUp="javascript:somente_numero(this);" value="" size=80> <br>
Comentário:
<textarea name="escreva" rows="10" cols="60">escreva aqui seu comentário</textarea>
</br>
<b> Observação: Seu comentário será publicado após passar pelo moderador.</b></center><br>
<center><input type ="submit" name = "validar" value = "Enviar" onclick = "validar()"></center>
</form>
</body>
</html>
Eu gostaria que o js verificasse se os 3 campos foram preenchidos corretamente. A função deve exibir uma caixa de alerta contendo uma mensagem de erro ou sucesso após o botão submit ser clicado .
Ajuda
12/11/2011 - 18:14, Thales Augusto | #
Olá August Muito bom seu site adorei muito e passei aqui para deixar um pedido: queria que voce fizesse uma aula de validação de formulario junto com o php, pois estou querendo aprender as duas linguagens e criar um site elegante com o que irei aprender. Para ser mais especifico eu queria que vc ensinasse a validação de usuarios(se já existe ou não, sem precisar carregar em outra página), email(o mesmo processo), senha(se está forte, fraca ou media). então ´e isso deixei um pedido, espero que voce me atenda.
Quando vc fazer(se fazer me envia um email falando que enviou e o link de onde esta (Coloca no assunto do email: Aqui o tutorial para validar com JavaScript com PHP("Pra eu nao achar que ´e vírus")))
parabens pelo seu site!!!
Tchau e Obrigado
Faço como meu o pedido do Thales
20/01/2012 - 18:44, Leon | #
Agradeceriase vc atendesse o pedido do Thales. Também procurei exaustivamente na internet uma aula ou código de validação de email de usuarios(sem precisar carregar em outra página e perder o que o usuário já digitou), através do Banco de Dados (PHP) usando o javascript. Quando a sua aula acima, me ajudou bastante. Obrigado.
Mandou bemmmm...
27/01/2012 - 08:48, Hugo Henrique Rodrigues | #
Não tive como não comentar, sempre tive dúvidas para os mais diversos tipos de validação, obrigado pelo seu post, com certeza irá ajudar muita gente.
Abração
Tudo de bom pra você e sua familia.
kmcwdj
28/02/2012 - 13:20, kmcwdj | #
uhsllf
Javascript
29/02/2012 - 14:28, Micheli Guedes | #
Boa tarde!
Em primeiro lugar gostaria de agradecer pelo site, é bastante esclarecedor, porem sou inciante na area...
Estou fazendo um formalario de CADASTRO DE VAGAS E USUARIOS.
com validaçao de java script.
Poderia conferir pra mim e me dizer o q esta errado por gen
tileza?!
Cad. de Usuarios(form.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function valida(form) {
if (form.senha.value=="" || form.senha.value.length < 6) {
alert("Preencha a senha corretamente.");
form.senha.focus();
return false;
}
if (form.senha.value!=form.conf_senha.value) {
alert("A senha e a confirmação tem de ser iguais.");
form.Conf_Senha.focus();
return false;
}}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cadastro do Usuario</title>
</head>
<body>
<strong>Cadrasto de Usuários</strong>
<p>
<form onsubmit="return valida (this);" method="get" action="conexao-usuario-pat.php" name="conexao-usuario-pat.php">
<strong>Iduser </strong>
<input name="textIduser" type="text" id="txtIduser" />
</strong>
<p>
<strong>Nome</strong>
<input name="textNome" type="text" id="txtNome" />
<p>
<strong>Login
<input name="texLogin" type="text" id="txtLogin" />
</strong>
<p>
<strong>Senha </strong>
<input name="textSenha" type="password" id="txtSenha"/>
<p>
<strong>Confirme Senha </strong>
<input name="textConf_Senha" type="password" id="txtConf_Senha"/><br><br>
<p>
<strong>Status
<input name="textStatus" type="text" id="txtStatus" />
</strong>
<p>
<input name="btGravar" type="submit" id="Gravar" value="Gravar" />
<input name="btLimpar" type="reset" id="btLimpar" value="Limpar" />
</form>
</body>
</html>
gghhg
02/03/2012 - 01:54, hghghghg | #
sdsdsddssd
weukhejf
05/03/2012 - 17:54, weukhejf | #
fvyigmxn
jpljxtlq
13/03/2012 - 14:57, jpljxtlq | #
sugxnr
iiji
hjkhjk
sdfsdfsdf
09/04/2012 - 10:02, sdfsdfsf | #
sdfsdfsdfsdfsdf
camp radio
17/04/2012 - 00:16, johny sued | #
quero validar um o campo que e com radio como faço
me ajude ae galera..
Parabéns
21/04/2012 - 16:32, Douglas | #
Recebi o link dessa página como indicação em uma aula de Programação para Internet Rica, estamos vendo JavaScript. Gostei bastante! Parabéns!
Servidor Apache2.2
11/05/2012 - 11:52, Julio | #
Por gentileza, esse código roda em um servidor Apache2.2? tentei aqui, a pagina abre mas não funcionam as validações.
Teria alguma coisa par configurar no servidor WEB para ele rodar os códigos JavaScripts?
Abs.
Julio.
Servidor Apache2.2
12/05/2012 - 07:19, Julio | #
Pessoal, desculpem, bobiei o script roda no lado cliente no navegador e nao tem nada a ver com o servidor web, tinha um problema no código e por isso nao rodava.
Sds.
julio.
sr
14/05/2012 - 21:01, vder | #
ok
httfh
17/05/2012 - 09:00, ggy | #
hgfh
www.HelpMasters.com.br | Todos os direitos reservados Like Box