0 votos
50 visitas
perguntado em HTML por (860 pontos)
Como validar campos de formulários no HTML5?

2 Respostas

0 votos
respondida por (1,2K pontos)
Há duas formas:

A primeira é validação de front end que pode ser utilizada pelo própio html5 ou utilizando javascript.

A segunda é validação de back end que pode utilizar a linguagem de back end no caso.

Exemplo de validação html:

<input type="email" name="email">

O type email já chama a validação nativa do HTML5 e obriga o usuário a colocar um @algumacoisa.com
comentado por (860 pontos)
Show de bola!!
0 votos
respondida por (1,2K pontos)

Em Html5 já existe validações de formulário nas quais não é necessário nenhuma utilização de javascript ou qualquer outro método externo.

Segue lista dos atributos já existentes:
required
- Faz com que o campo seja obrigatório
- Funciona nos seguintes campos (text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file).

pattern
- Você pode aplicar uma expressão regular ao campo. Ex: pattern="[A-Za-z]{3}" (neste caso você obriga o usuário a digitar ter caracteres que sejam letras).
- Você pode aprender um pouco sobre expressão regular clicando SAIBA SOBRE EXPRESSÃO REGULAR

multiple
- Quando o campo é do tipo "File" este atribulo permite que o usuário coloque multiplos arquivos.
- Funciona nos seguintes campos (email, and file).

min
- Você especifica o número minimo que o campo aceita.

max
- Você especifica o número máximo que o campo aceita.

Nota: Quando o min e o max são utilizados no mesmo campo você cria um "range" ou seja o usuário só podera digitar números entre o min e o max.

minlength
- Você especifica a quantidade mínima de caracteres que o campo aceita.

maxlength
- Você especifica a quantidade máxima de caracteres que o campo aceita.

Além dos tipos de campos (type):

email - Especifica o campo para email.
number - Especifica o campo para número (influencia no mobile, quando o campo for number automaticamente abrirá o teclado numero)
date - Especifica o campo para data. (Alguns browsers ainda não funcionam direito).
password - Especifica o campo para senha.
search - Especifica o campo para busca.
 

Espero ter ajudado.

...