Artigos HTML e CSS HTML5 Validator: Validando Formulários 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.

Aparência do formulário
Figura 1. Aparência do formulário

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:

Resultado da validação
Figura 2. Resultado da validação

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.

Resultado da validação em HTML5
Figura 3. Resultado da validação em HTML5

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.