Aprenda como validar um campo de email.
Estrutura HTML:
<html> <body> <form method="post" action="" onSubmit="return ( verifica() )" name="frmEnvia"> <label for="email">E-mail: </label> <input name="email" type="text" class="input" id="email" onblur="checarEmail();" /> <input name="submit" type="submit" value=" ENVIAR " /> </form> </body> </html>
Explicando:
Ao pressionar o botão do tipo “submit”, o evento “onSubmit” será acionado e a função verifica() será chamada. Essa função verifica se algum valor foi digitado. A função que verificará se o valor digitado está no formato correto de email, será chamado quando o campo perder o foco (evento onblur).
Adicionando a função verifica():
<script type="text/javascript"> function verifica() { if (document.forms[0].email.value.length == 0) { alert('Por favor, informe o seu EMAIL.'); document.frmEnvia.email.focus(); return false; } return true; } </script>
Explicando:
Esta função não valida o email e sim verifica se algum valor foi digitado.
Função para validar o email:
<script type="text/javascript"> function checarEmail(){ if( document.forms[0].email.value=="" || document.forms[0].email.value.indexOf('@')==-1 || document.forms[0].email.value.indexOf('.')==-1 ) { alert( "Por favor, informe um E-MAIL válido!" ); return false; } } </script>
Explicando:
document.forms[]: acessa um array de form. Pode ser pelo Ãndice ou pelo nome (definido no atributo NAME da tag FORM). Utilizamos o valor 0, pela referência ao primeiro Form.
email.value: valor do campo ‘email”.
indexOf: aqui está o x da questão! indexOf faz uma pesquisa pelo valor informado. A utilização do -1 é utilizado para quando não se encontrar uma referência ao texto informado.
Um alerta será dado, se o campo estiver em “branco” ou se não digitar “@” ou se não digitar “.”.
Códido Completo:
<html> <head> <script type="text/javascript"> function verifica() { if (document.forms[0].email.value.length == 0) { alert('Por favor, informe o seu EMAIL.'); document.frmEnvia.email.focus(); return false; } return true; } function checarEmail(){ if( document.forms[0].email.value=="" || document.forms[0].email.value.indexOf('@')==-1 || document.forms[0].email.value.indexOf('.')==-1 ) { alert( "Por favor, informe um E-MAIL válido!" ); return false; } } </script> </head> <body> <form method="post" action="" onSubmit="return ( verifica() )" name="frmEnvia"> <label for="email">E-mail: </label> <input name="email" type="text" class="input" id="email" onblur="checarEmail();" /> <input name="submit" type="submit" value=" ENVIAR " /> </form> </body> </html>
Related posts:
Muito bom.