Formularios HTML5 | Novos Recursos – validação – Aula 4 de 4 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)
Dando continuidade a MEGA Série sobre HTML5. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.
O que veremos?
Nesta aula vamos encerrar o assunto sobre formulários web, trazendo até vocês os recursos de validação. Recursos nativos que vieram com o HTML5.
Mais a Respeito
O processo de validação de formulário sempre foi e será um ponto muito importante em um projeto web. Podemos trabalhar com validação do lado do servidor (back-end), do lado do cliente usando javascript (front-end) e ainda combinar estes dois processos com a validação nativa disponível em HTML5.
A minha recomendação é que você combine estes 3 tipos de validação em seu projeto web, trazendo uma maior confiabilidade e consistência dos dados fornecidos pelo usuário.
Como o assunto desta aula é falar apenas dos recursos de validação nativos do HTML5, vamos então ao que interessa. Em primeiro lugar, gostaria de
listar os recursos:
1- Campo obrigatório
2- Min, Max e Step
3- Expressões Regulares
4- NoValidate
5- Mensagens Customizadas
6- Validações Nativas (Campos do tipo E-Mail, Number e Url)
Agora explicarei rapidamente cada um deles, já que no vídeo veremos na prática como implementá-los.
Campo obrigatório (atributo required)
Bom, como o nome já indica, ao incluirmos o atributo required na definição de um campo, ele torna-se obrigatório. Se o campo estiver vazio, o usuário não conseguirá submeter o formulário e uma mensagem de alerta irá aparecer.
Min, Max e Step
Estes atributos são geralmente usados para campos do tipo numérico ou do tipo range. Ao usar Min e Max, o usuário não conseguirá submeter o formulário se o conteúdo do campo estiver fora do intervalo configurado. Exemplo: se um campo numérico possuir o atributo Min=”10″, e o usuário digitar um número menor, será exibida uma mensagem de alerta e o formulário não será submetido até que a condição seja satisfeita.
Mas você sabia que os atributos Min e Max também podem ser usados para campos do tipo data? Sim, isso mesmo que eu falei. Imagine que você deseja que o usuário informe uma data superior a 28/06/2018 e impedir que o formulário seja submetido se esta condição não for satisfeita. Bom, você consegue implementar esta regra da seguinte forma: min=”2018-06-29″. Fácil não?
Expressões Regulares (atributo pattern)
Com o uso de expressões regulares, as possibilidade de regras de validação são inúmeras. Eu posso, por exemplo, usar um campo do tipo texto e incluir o atributo correspondente a expressão regular para validar se o usuário digitou apenas letras. Eu consigo fazer isso da seguinte forma: incluir o atributo pattern=”[a-zA-Z]” no campo do tipo texto.
novalidate
Este atributo é utilizado a nível de formulário. Você não conseguirá usá-lo apenas para campos específicos. O que este atributo faz é retirar a validação e permitir que o formulário seja submetido. Mais detalhes serão mostrados no vídeo.
Mensagens customizadas
Este recurso eu considero como um dos mais interessantes. Com ele é possível criar mensagens mais claras ao usuário indicando que ocorreu algo de errado na tentativa de submeter o formulário. Ao invés de aparecer uma mensagem genérica (mensagem de alerta) quando usamos expressões regulares para algum campo, podemos definir uma melhor mensagem ao usuário. Também podemos definir outra mensagem para a validação dos campos do tipo e-mail, number e url. No vídeo eu explicarei em detalhes como implementar e usar as mensagens customizadas.
Validações Nativas
Além dos recursos de validação que apresentei acima, ainda temos os recursos nativos que foram apresentados nas duas aulas anteriores. De forma nativa, temos a validação de campos do tipo e-mail, number e url.
[Conclusão]
Na aula de hoje [Formularios HTML5], demos sequência na Mega série sobre HTML 5. Fechamos o tema sobre formulários web, falando sobre os recursos de validação do lado do cliente. Com HTML5, ficou muito mais fácil e rápido implementar o processo de validação do lado do cliente.
Vou disponibilizar este projeto na minha área de downloads, para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso. Dentro da minha área de Downloads, procure pela pasta HTML5. O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Cloud 9: https://c9.io/login
PlayList Cloud 9: https://goo.gl/7aQbD6
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
Link do vídeo: https://youtu.be/U04zm65nEhQ
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário