Tipos de Dados e Validadores
- Formulários vitaminados
Com a evolução do HTML chegando a sua versão 5, foram feitas varias mudanças dos campos de formulários, facilitando assim a vida de quem precisa desenvolver aplicações WEB. Nesse post falarei mais sobre essas mudanças.
- autofocus
Campo de formulário usando autofocus:
Exemplo
<input name="login" autofocus>
Quando usamos essa solução ao carregarmos a pagina o campo é usado automaticamente. Ao contrario do Jacascript, o foco logo estará no campo logo que seja criado. Isso evita problemas caso o usuário final vai para outro campo, mudando de foco.
- Placeholder text
Novas propriedades de formulários chegaram ao HTML5 uma delas é o Placeholder. Quando temos um formulários e queremos colocar alguma descrição dentro do formulários em que o usuário que preenche-lo. Exemplo básico disse quando temos uma formulário ela existem dois campos um de Login e Senha, podemos utilizar o Placeholder para implementar uma breve explicação sobre o campo a ser usado, no campo Login, poderíamos colocar, “Digite seu Login Aqui” e na senha poderíamos colocar, “Digite sua senha de 6 Dígitos”.
Exemplo do HTML
1 <!DOCTYPE html> 2 <html lang=”en-US”> 3 <head> 4 <meta charset=”UTF-8” /> 5 <title>Placeholder, HTML5 way</title> 6 </head> 7 8 <body> 9 <input name=”q” placeholder=”Search here”> 10 </body> 11 12 </html>
- required
Quando precisamos fazer com que o nosso formulários tenha um campo obrigatório implementamos uma flag em nosso HTML chamada requered
<input name="login" requered>
- maxlength
Quando queremos colocar limites de caracteres em nosso formulário usamos essa flag maxlenght que foi aperfeiçoada em nosso HTML5.
Validação de Formulários
Com HTML5 utilizando a Flag type, podemos automatizar quase todos os campos de preenchimento de formulários, que necessitam de validações, que seriam o preenchimento obrigatório, como por exemplo e-mail, telefone, etc. Abaixo falaremos mais sobre alguns tipos.
- pattern
Associamos essa Flag para amarrarmos tipos de sintaxes com expressões regulares sem necessidade de utilizarmos JS (Javascript), Exemplo CEP:
1 <!DOCTYPE html>
2 <html lang=”pt-BR”>
3 <head>
4 <meta charset=”UTF-8” />
5 <title>O atributo pattern</title>
6 </head>
7
8 <body>
9
10 <form>
11 <label for=”CEP”>CEP:
12 <input name=”CEP” id=”CEP” required pattern=”\d{5}-?\d{3}” />
13 </label>
14 <input type=”submit” value=”Enviar” />
15 </form>
16
17 </body>
18
19 </html>
20
- novalidate e formnovalidate
Caso haja algum formulário que não precisa ser validado usamos o elemento form e o atributo novalidate..
Exemplo em HTML
1 <!DOCTYPE html>
2 <html lang=”pt-BR”>
3 <head>
4 <meta charset=”UTF-8” />
5 <title>Salvando rascunho</title>
6 <style>
7 label{display:block;}
8 </style>
9 </head>
10
11 <body>
12
13 <form>
14 <label>nome: <input name=”nome” required></label>
15 <label>email: <input name=”email” type=”email” required></label>
16 <label>mensagem: <textarea name=”mensagem” required></textarea></label>
17 <input type=”submit” name=”action” value=”Salvar rascunho” formnovalidate>
18 <input type=”submit” name=”action” value=”Enviar”>
19 </form>
20
21 </body>
22
23 </html>
24
- Custom validators
Todas as validações utilizadas no HTML5 atendem a maioria dos nossos casos, porém não são suficientes para todas situações. As vezes necessitaremos de utilizar Javascript. Existem duas especificações validas no HTML5 que iremos expor aqui são elas:
1) O novo evento oninput > Usamos quando algo e modificado no valos de uma campo ja implementado. Diferente do nosso onchange, que é utilizado no final da edição.
2) setCustomValidity > Usado com String, se o campo for vazio ele será marcado como valido. Caso contrario invalido, Veremos o exemplo em HTML para validar CPF:
1 <!DOCTYPE html>
2 <html lang=”pt-BR”>
3 <head>
4 <meta charset=”UTF-8” />
5 <title>Custom validator</title>
6 <!-- O arquivo cpf.js contém a função validaCPF, que
7 recebe uma string e retorna true ou false. -->
8 <script src=”cpf.js”></script>
9 <script>
10 function vCPF(i){
11 i.setCustomValidity(validaCPF(i.value)?’’:’CPF inválido!’)
12 }
13 </script>
14 </head>
15
16 <body>
17 <form>
18 <label>CPF: <input name=”cpf” oninput=”vCPF(this)” /></label>
19 <input type=”submit” value=”Enviar” />
20 </form>
21 </body>
22
23 </html>
24
