HTML5 Validator: Validando Formulários com HTML5
Veja nesse artigo como realizar validações de formulários com javascript e também com html5.
Olá pessoal, neste artigo vamos falar sobre uma nova funcionalidade do HTML5 que é muito útil na criação de validações de formulários, é o HTML5 Validator.
Há muito tempo a validação de um campo de formulário é uma coisa que vem dando muito trabalho aos desenvolvedores, muitos programadores desenvolveram formas de validação em javascript, depois com o surgimento do jQuery logo apareceu um plugin de validação, mas agora com o novo HTML5 as coisas ficaram muito, mas muito mais fáceis, pois a validação tornou-se algo nativo da linguagem.
Nesse artigo vou mostrar algumas opções de como realizar a validação de um campo, seja ela por javascript ou no HTML5.
Vamos começar pela validação em javascript, abaixo vamos usar o seguinte código html, será um código simples de um formulário, o qual iremos validar para não ser enviado sem nada escrito.
<!DOCTYPE html>
<html>
<head>
<title>Validação de formulários - DevMedia Tutorial</title>
</head>
<body>
<form action="pagina de ação" method="post" name="dados"
onSubmit="return enviardados();" >
<table width="588" border="0" align="center" >
<tr>
<td width="118"><font size="1" face="Verdana,
Arial, Helvetica, sans-serif">Nome completo:</font></td>
<td width="460">
<input name="tx_nome" type="text" class="formbutton"
id="tx_nome" size="52" maxlength="150">
</td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica,
sans-serif">E-mail:</font></td>
<td><font size="2">
<input name="tx_email" type="text" id="tx_email" size="52"
maxlength="150" class="formbutton">
</font></td>
</tr>
<tr>
<td><font face="Verdana, Arial, Helvetica,
sans-serif"><font size="1">Mensagem<strong>:
</strong></font></font></td>
<td rowspan="2"><font size="2">
<textarea name="tx_mensagem" cols="50" rows="8"
class="formbutton" id="tx_mensagem" input ></textarea>
</font></td>
</tr>
<tr>
<td height="85"><p><strong><font face="Verdana,
Arial, Helvetica, sans-serif"><font size="1">
</font></font></strong></p></td>
</tr>
<tr>
<td height="22"></td>
<td>
<input name="Submit" type="submit" class="formobjects"
value="Enviar dados">
<input name="Reset" type="reset" class="formobjects"
value="Redefinir">
</td>
</tr>
</table>
</form>
</body>
</html>Listagem 1. Código html
Esse é o nosso formulário, que deverá ser exibido como mostra a figura 1.
Agora precisamos usar o Javascript para validar esses campos. O que queremos que aconteça é que seja impossível enviar os dados do formulário com o campo vazio, para isso iremos utilizar um código javascript.
<script language="JavaScript" >
function enviardados(){
if(document.dados.tx_nome.value=="" ||
document.dados.tx_nome.value.length < 8)
{
alert( "Preencha campo NOME corretamente!" );
document.dados.tx_nome.focus();
return false;
}
if( document.dados.tx_email.value=="" ||
document.dados.tx_email.value.indexOf('@')==-1 ||
document.dados.tx_email.value.indexOf('.')==-1 )
{
alert( "Preencha campo E-MAIL corretamente!" );
document.dados.tx_email.focus();
return false;
}
if (document.dados.tx_mensagem.value=="")
{
alert( "Preencha o campo MENSAGEM!" );
document.dados.tx_mensagem.focus();
return false;
}
if (document.dados.tx_mensagem.value.length < 50 )
{
alert( "É necessario preencher o campo MENSAGEM com
mais de 50 caracteres!" );
document.dados.tx_mensagem.focus();
return false;
}
return true;
}
</script>Listagem 2. Código javascript de validação
Após colocarmos esse código nosso formulário deverá validar, se por exemplo deixarmos o campo nome em branco, ele mostrará a seguinte mensagem:
Dessa forma nosso formulário está sendo validado, de forma simples e fácil, mas com um código um pouco grande, como podemos ver.
Validando com HTML5
Com a chegada da nova versão do HTML, além de muitas outras melhorias, agora podemos validar um campo sem precisar escrever muito código, tornando o trabalho dos desenvolvedores muito mais prático e fácil.
Na listagem a seguir veremos que é possível fazer o mesmo do exemplo anterior de um maneira muito mais fácil e prática e escrevendo muito menos código.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Validação de formulários em HTML5</title>
</head>
<body>
<form method="post" action="">
<label for="nome">Nome: </label>
<input id="nome" type=text required name=nome/>
<br />
<label for="email">Email: </label>
<input id="email" type=text required name=email/>
<input type=submit value="OK"/>
</form>
</body>
</html>Listagem 3. Validando formulário com HTML5
Nota: Não podemos esquecer que para usar recursos HTML5 precisamos colocar o doctype referente à linguagem.
Como podemos ver, escrevemos muito menos código do que anteriormente e na imagem a seguir podemos ver que o resultado é o mesmo da validação com javascript.
Personalizando a Mensagem de Validação
Caso você queira personalizar a mensagem de validação, é possível incluir uma nova mensagem junto da mensagem padrão do browser utilizando o atributo title, mas dessa forma ela não é personalizada por completo. Veja abaixo como ficaria:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Validação de formulários em HTML5</title>
</head>
<body>
<form method="post" action="">
<label for="nome">Nome: </label>
<input id="nome" type=text title="Preencha o campo Nome"
required name=nome/> <br />
<label for="email">Email: </label> <input
id="email" type=text required name=email/>
<input type=submit value="OK"/>
</form>
</body>
</html>Listagem 4. Inserindo mensagem junto com mensagem padrão
Devemos lembrar que esta mensagem não substitui a mensagem padrão do browser, apenas aparece junto com ela explicando o que há de errado.
Foi proposto um atributo para editar a mensagem por completo, mas ainda não foi aceito pela W3C(até a publicação desse artigo). Até o momento, apenas no Firefox é possível declarar uma mensagem de erro 100% personalizada sem a necessidade de JavaScript, usando o atributo x-moz-errormessage.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Validação de formulários em HTML5</title>
</head>
<body>
<form method="post" action="">
<label for="nome">Nome: </label>
<input id="nome" type="text" required x-moz-errormessage="Ops.
Não esqueça de preencher este campo."/> <br />
<label for="email">Email: </label> <input id="email"
type="text required name=email/>
<input type=submit value="OK"/>
</form>
</body>
</html>Listagem 5. Personalizando no Firefox com x-moz-errormessage
Caso você queira alterar a mensagem padrão de qualquer jeito, é possível fazer utilizando JavaScript. basta inserir o código abaixo em seu site:
...
var campo1 = document.getElementById('nome');
//Seleciona o campo com a ID "nome"
campo1.setCustomValidity('Preencha este campo corretamente.');
//uso setCustomValidity para trocar a mensagem de erro dele.
...Listagem 6. Personalizando mensagem com javascript
Espero que tenha ficado claro essas duas formas de validação de formulário, vimos que além de utilizar o antigo javascript, é possível usar tecnologia nova (html5) para realizar a mesma função e escrevendo muito menos código, mesmo que para algumas personalizações mais profundas, ainda seja necessário o uso de javascript.
Fiquem à vontade de escolher qual delas usar e qual irá atender mais as suas necessidades.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo