Validação de formulário AngularJS ao enviar: exemplo de registro
James Hartmann
Validação de formulário em AngularJS
Validação de formulário no AngularJS é o processo de garantir se os dados inseridos em um formulário estão corretos e completos. Quando um usuário envia o formulário, a validação ocorre primeiro, antes que os detalhes sejam enviados ao servidor. O processo de validação garante, na melhor das hipóteses, que os detalhes dos campos de entrada sejam inseridos da maneira correta.
Em um exemplo do mundo real, vamos supor um site que exige o preenchimento de um formulário de registro antes de obter acesso total a esse site. A página de registro teria campos de entrada para nome de usuário, senha, ID de e-mail e assim por diante.
Por exemplo, o ID do e-mail sempre precisa estar no formato nomedeusuário@site.domínio; se alguém inserir apenas o nome de usuário no ID do e-mail, o ideal é que a validação falhe. Portanto, a validação consiste em fazer essas verificações básicas antes que os detalhes sejam enviados ao servidor para processamento posterior.
Validação de formulário usando HTML5
A validação de formulário é o processo de pré-validação das informações inseridas em um formulário web pelo usuário antes de serem enviadas ao servidor. É sempre melhor validar as informações do próprio cliente. Isso ocorre porque adiciona menos sobrecarga se o formulário for apresentado ao usuário novamente se as informações inseridas estiverem erradas.
Vamos dar uma olhada em como a validação de formulário AngularJS pode ser conduzida em HTML5.
Em nosso exemplo, mostraremos um formulário de registro simples ao 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Explicação do código
- Para o tipo de entrada de texto, estamos usando o atributo 'required'. Isso significa que a caixa de texto não pode ficar vazia quando o formulário é enviado e algum tipo de texto deve estar presente na caixa de texto.
- O próximo tipo de entrada é 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 email, o texto na caixa precisa corresponder ao padrão nome@site.domínio.
- 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 sucesso, a seguinte saída será mostrada quando você executar seu código no navegador para validação do formulário AngularJS no envio.
saída
Para ver a validação do formulário em ação, clique no botão Enviar sem inserir nenhuma informação na tela.
Após clicar no botão enviar, um pop-up aparecerá mostrando um erro de validação informando que o campo precisa ser preenchido.
Portanto a validação do controle que foi marcado como obrigatório, faz com que a mensagem de erro seja mostrada caso o usuário não insira nenhum valor no campo de texto.
Quando o usuário inserir 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 o ID de e-mail errado e clicar no botão enviar. Após clicar no botão enviar, 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 mostrada se o usuário não inserir um ID de e-mail adequado no campo de texto.
Por fim, quando você tentar inserir algum 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
- $sujo – O usuário interagiu com o controle
- $válido – O conteúdo do campo é válido
- $inválido – O conteúdo do campo é inválido
- $ impecável – 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.
Passo 1) Use a propriedade no validar ao declarar o formulário. Esta propriedade informa ao HTML5 que a validação seria feita pelo AngularJS.
Passo 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, será utilizado o nome do formulário.
Passo 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, será utilizado o nome do controle.
Passo 4) Use o ng-show diretiva 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 precisará inserir um nome de tópico na caixa de texto. Caso isso não seja feito, um erro de validação será acionado e a mensagem de erro será mostrada ao usuário.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Explicação do código
- Observe que demos um nome para o formulário que é “myForm”. Isso é necessário ao acessar os controles do formulário para validação do AngularJS.
- Utilização da propriedade “novalidate” para garantir que o formulário HTML permita que AngularJS realize 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, então o valor da propriedade “$dirty” será verdadeiro. Além disso, no caso em que o valor da caixa de texto for nulo, a propriedade “$invalid” 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 span com os caracteres vermelhos será exibido.
- Neste, estamos verificando a propriedade “$error” que também é avaliada 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 span exibirá o texto “Nome de usuário é obrigatório”.
- Se o valor do controle da caixa de texto for inválido, também queremos desabilitar o botão enviar para que o usuário não possa enviar o formulário. Estamos usando a propriedade “ng-disabled” do 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 ocorre a validação para o campo da caixa de texto.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
saída
Quando o formulário é exibido inicialmente, 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 é habilitada e o botão Enviar é desabilitado.
A captura de tela acima mostra duas coisas
- O botão enviar está desativado
- Não há nome de tópico na caixa de texto Tópico. Conseqüentemente, 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 conseguir 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 deverá ser exibida caso este controle não seja preenchido.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
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 extensão, controle div e assim por diante), como os controles de entrada, também seja colocado na classe de grupo de formulários.
- Inclua o jcs-autovalidate em seu módulo AngularJS JS.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
saída
Por padrão, quando você executa seu código, o formulário acima será mostrado conforme 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.
Feedbacks de usuários com botões Ladda
Os botões “ladda” são uma estrutura especial construída para botões na parte superior JavaScript para dar um efeito visual aos botões quando eles 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 fornecer efeitos visuais adicionais.
Vejamos um exemplo de como ver os botões “ladda” em ação. Veremos apenas um formulário simples que possui um botão de envio. Quando o botão é pressionado, um efeito giratório será mostrado no botão.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Explicação do código
- Estamos usando o “ng-enviar” para chamar uma função chamada “enviar”. 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 submitting.
- 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 definindo o valor de uma variável chamada 'enviando' para falso. Este valor é definido para o atributo ladda do botão enviar. 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 sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
saída
Quando o formulário é exibido inicialmente, o botão enviar é mostrado em seu formato simples.
Quando o botão enviar é pressionado, a variável de envio no controlador é definida como verdadeira. Este valor é passado para o atributo “ladda” do botão de envio que causa o efeito de rotação do botão.
Resumo
- A validação para os controles HTML da caixa de texto pode ser feita usando o atributo 'required'.
- No HTML5, novos controles foram adicionados, como senha, email e número, que fornecem seu próprio conjunto de validações.
- A validação de formulário em AngularJS é feita observando 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.
- Botões Ladda podem ser adicionados a um aplicativo Angular.js para fornecer uma sensação visual aprimorada ao usuário quando o botão é pressionado.
