A validação é o processo que garante que os dados estão corretos e completos.
Em um exemplo do mundo real, vamos supor um site que requer o preenchimento de um formulário de registro antes de obter acesso total a este site. A página de registro teria campos de entrada para nome de usuário, senha, id de e-mail e assim por diante.
Quando o usuário envia o formulário, normalmente ocorre uma validação antes de os detalhes serem enviados ao servidor. Essa validação tentaria garantir, da melhor maneira possível, que os detalhes dos campos de entrada sejam inseridos da maneira correta.
Por exemplo, o id do e-mail sempre precisa estar no formato Este endereço de e-mail está protegido contra spambots. Você deve habilitar o JavaScript para visualizá-lo. ; se alguém inserir apenas o nome de usuário na id do e-mail, o ideal é que a validação falhe. Portanto, a validação analisa a realização dessas verificações básicas antes que os detalhes sejam enviados ao servidor para processamento posterior.
Neste tutorial, você aprenderá-
- Validação de formulário usando HTML5
- Validação de formulário usando $ dirty, $ valid, $ invalid, $ pristine
- Validação de formulário usando AngularJS Auto Validate
- Feedback do usuário com botões Ladda
Validação de formulário usando HTML5
A validação do formulário é o processo de pré-validação das informações inseridas em um formulário da web pelo usuário antes de serem enviadas ao servidor. É sempre melhor validar as informações do próprio lado do cliente. Isso ocorre porque ele adiciona menos sobrecarga se o usuário tiver que ser apresentado com o formulário novamente se as informações inseridas estiverem incorretas.
Vamos dar uma olhada em como a validação de formulário pode ser conduzida em HTML5.
Em nosso exemplo, mostraremos um formulário de registro simples para o usuário, no qual o usuário precisa inserir detalhes como nome de usuário, senha, id de e-mail e idade.
O formulário terá controles de validação para garantir que o usuário insira as informações de maneira adequada.
Event Registration Guru99 Global Event
Explicação do código:
- Para o tipo de entrada de texto, estamos usando o atributo 'obrigatório'. Isso significa que a caixa de texto não pode estar vazia quando o formulário é enviado, e algum tipo de texto deve estar presente na caixa de texto.
- O próximo tipo de entrada é a senha. Como o tipo de entrada é marcado como senha, quando o usuário inserir qualquer texto no campo, ele será mascarado.
- Como o tipo de entrada é especificado como e-mail, o texto na caixa precisa corresponder ao padrão Este endereço de e-mail está protegido contra spambots. Você deve habilitar o JavaScript para visualizá-lo. .
- Quando o tipo de entrada é marcado como um número, se um usuário tentar inserir qualquer caractere usando o teclado ou o alfabeto, ele não será inserido na caixa de texto.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Para ver a validação do formulário em ação, clique no botão Enviar sem inserir nenhuma informação na tela.
Depois que o botão enviar é clicado, um pop-up aparecerá mostrando um erro de validação de que o campo precisa ser preenchido.
Assim, a validação do controle que foi marcado como obrigatório faz com que seja exibida a mensagem de erro se o usuário não inserir nenhum valor no campo de texto.
Quando o usuário insere qualquer valor no controle de senha, você notará o símbolo '*' usado para mascarar os caracteres que estão sendo inseridos.
Vamos então inserir a id de e-mail errada e clicar no botão enviar. Depois que o botão enviar é clicado, um pop-up aparecerá mostrando um erro de validação de que o campo precisa ter o símbolo @.
Portanto, a validação do controle que foi marcado como controle de e-mail fará com que a mensagem de erro seja exibida se o usuário não inserir um id de e-mail adequado no campo de texto.
Finalmente, ao tentar inserir qualquer caractere no controle de texto de idade, ele não será inserido na tela. O controle só será preenchido com um valor quando um número for inserido no controle.
Validação de formulário usando $ dirty, $ valid, $ invalid, $ pristine
AngularJS fornece suas propriedades adicionais para validação. AngularJS fornece as seguintes propriedades para controles para fins de validação
- $ dirty - O usuário interagiu com o controle
- $ valid - O conteúdo do campo é válido
- $ invalid - O conteúdo do campo é inválido
- $ pristine - O usuário ainda não interagiu com o controle
Abaixo estão as etapas que devem ser seguidas para realizar a validação Angular.
Etapa 1) Use a propriedade no validate ao declarar o formulário. Esta propriedade informa ao HTML5 que a validação seria feita por AngularJS.
Etapa 2) Certifique-se de que o formulário tenha um nome definido para ele. A razão para fazer isso é que, ao realizar a validação Angular, o nome do formulário será usado.
Etapa 3) Certifique-se de que cada controle também tenha um nome definido para ele. A razão para fazer isso é que, ao realizar a validação Angular, o nome do controle será usado.
Etapa 4) Use a diretiva ng-show para verificar as propriedades $ dirty, $ invalid e $ valid para os controles.
Vejamos um exemplo, que incorpora as etapas mencionadas acima.
Em nosso exemplo,
Teremos apenas um campo de texto simples no qual o usuário precisa inserir um nome de Tópico na caixa de texto. Se isso não for feito, um erro de validação será disparado e a mensagem de erro será mostrada ao usuário.
Event Registration Guru99 Global Event
Explicação do código:
- Observe que demos um nome para o formulário, que é "meuFormulário". Isso é necessário ao acessar os controles no formulário para validação do AngularJS.
- Usar a propriedade "novalidate" para garantir que o formulário HTML permite que o AngularJS execute a validação.
- Estamos usando a diretiva ng-show para verificar as propriedades "$ dirty" e "$ invalid". Isso significa que se a caixa de texto foi modificada, o valor da propriedade "$ dirty" será verdadeiro. Além disso, no caso em que o valor da caixa de texto é nulo, a propriedade "$ inválida" se tornará verdadeira. Portanto, se ambas as propriedades forem verdadeiras, a validação falhará para o controle. Portanto, se ambos os valores forem verdadeiros, o ng-show também se tornará verdadeiro e o controle de amplitude com os caracteres de cor vermelha será exibido.
- Neste, estamos verificando a propriedade "$ error" que também avalia como verdadeira porque mencionamos para o controle que o valor deve ser inserido para o controle. Nesse caso, onde não há dados inseridos na caixa de texto, o controle de amplitude exibirá o texto "Nome de usuário obrigatório".
- Se o valor de controle da caixa de texto for inválido, também queremos desabilitar o botão de envio para que o usuário não possa enviar o formulário. Estamos usando a propriedade "ng-disabled" para o controle para fazer isso com base no valor condicional das propriedades "$ dirty" e "$ invalid" do controle.
- No controlador, estamos apenas definindo o valor inicial do valor da caixa de texto para o texto 'AngularJS'. Isso está sendo feito apenas para definir algum valor padrão para a caixa de texto quando o formulário é exibido pela primeira vez. Ele mostra melhor como a validação ocorre para o campo da caixa de texto.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Quando o formulário é inicialmente exibido, a caixa de texto exibe o valor de "AngularJS" e o "botão enviar" é habilitado. Assim que você remove o texto do controle, a mensagem de erro de validação é ativada e o botão Enviar é desativado.
A imagem acima mostra duas coisas
- O botão Enviar está desativado
- Não há nome de tópico na caixa de texto Tópico. Portanto, ele dispara a mensagem de erro "Nome de usuário obrigatório".
Validação de formulário usando AngularJS Auto Validate
Existe um recurso no AngularJS para validar todos os controles em um formulário automaticamente, sem a necessidade de escrever código personalizado para a validação. Isso pode ser feito incluindo um módulo personalizado chamado "jcs-AutoValidate".
Com este módulo instalado, você não precisa colocar nenhum código especial para realizar a validação ou mostrar as mensagens de erro. Tudo isso é tratado pelo código dentro do JCS-AutoValidate.
Vejamos um exemplo simples de como fazer isso.
Neste exemplo,
Teremos apenas um formulário simples com um controle de caixa de texto que é um campo obrigatório. Uma mensagem de erro deve ser exibida se este controle não estiver preenchido.
Event Registration Guru99 Event
Explicação do código:
- Primeiro, precisamos incluir o script "jcs-auto-validate.js" que possui toda a funcionalidade de validação automática.
- Precisamos garantir que cada elemento incluindo a "tag div" seja colocado em uma classe "form-group".
- Também é necessário garantir que cada elemento (que é um elemento HTML, como controle de entrada, controle de amplitude, controle de div e assim por diante), como os controles de entrada, também sejam colocados na classe do grupo de formulários.
- Inclua o jcs-autovalidate em seu módulo AngularJS JS.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Por padrão, quando você executa seu código, o formulário acima será mostrado de acordo com o código HTML.
Se você tentar enviar o formulário, uma mensagem de erro aparecerá dizendo: "Este campo é obrigatório". Tudo isso é feito pela opção JCS-AutoValidate.
Feedback do usuário com botões Ladda
Os botões "ladda" são uma estrutura especial construída para botões na parte superior do JavaScript para dar um efeito visual aos botões quando são pressionados.
Portanto, se um botão receber o atributo "ladda" e for pressionado, um efeito de rotação será mostrado. Além disso, existem diferentes estilos de dados disponíveis para o botão para fornecer efeitos visuais adicionais.
Vejamos um exemplo de como ver os botões "ladda" em ação. Veremos apenas um formulário simples com um botão de envio. Quando o botão é pressionado, um efeito de rotação será mostrado no botão.
Event Registration Guru99 Event
Explicação do código:
- Estamos usando a diretiva "ng-submit" para chamar uma função chamada "submit". Esta função será usada para alterar o atributo ladda do botão enviar.
- O atributo ladda é um atributo especial da estrutura ladda. É este atributo que adiciona o efeito de rotação ao controle. Estamos definindo o valor do atributo ladda para a variável submetendo.
- A propriedade data-style é novamente um atributo adicional oferecido pela estrutura ladda, que apenas adiciona um efeito visual diferente ao botão de envio.
- O módulo 'AngularJS-ladda' precisa ser adicionado ao aplicativo AngularJS.JS para que a estrutura ladda funcione.
- Inicialmente, estamos definindo e configurando o valor de uma variável chamada 'submetendo' como falso. Este valor é definido para o atributo ladda do botão de envio. Ao definir inicialmente como falso, estamos dizendo que não queremos que o botão enviar tenha o efeito ladda ainda.
- Estamos declarando uma função que é chamada quando o botão enviar é pressionado. Nesta função, estamos definindo o 'envio' como verdadeiro. Isso fará com que o efeito ladda seja aplicado ao botão enviar.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Quando o formulário é exibido inicialmente, o botão de envio é mostrado em seu formulário simples.
Quando o botão de envio é pressionado, a variável de envio no controlador é definida como verdadeira. Este valor é passado para o atributo "ladda" do botão enviar, o que causa o efeito de rotação do botão.
Resumo
- A validação dos controles HTML da caixa de texto pode ser feita usando o atributo 'obrigatório'.
- No HTML5, novos controles foram adicionados, como senha, e-mail e número, que fornecem seu próprio conjunto de validações.
- A validação do formulário no AngularJS é feita observando-se os valores $ dirty, $ valid, $ invalid e $ pristine de um controle de formulário.
- A validação automática em aplicativos AngularJS também pode ser obtida usando o módulo de validação automática JCS.
- Os botões Ladda podem ser adicionados a um aplicativo Angular.js para dar uma sensação visual aprimorada ao usuário quando o botão é pressionado.