AngularJS form validation-form Verification

When taking input from our users, it's important to show visual feedback on their input.

In the context of human relationships, form validation is just as much about giving feedback as well as getting the "right" input.

When you get input from a user, it is important to give the user a visual feedback. The purpose of form verification is to give feedback and get correct input.

Not only does it provide positive feedback for our user, it will also semi-protect our web app from bad or invalid input.

We can only protect our back end as much as is possible with our web front end.

It not only provides positive feedback to our users, but also protects our applications from incorrect or invalid input. We can only add measures at the front end to protect the backend as much as possible.

Out of the box, AngularJS support form validation with a mix of the HTML5 form validation inputs

As well as with its own validation ves ctives.

Creatively, in Form Verification, AngularJS supports both HTML5 hybrid form verification and the built-in direves VES for verification.

There are terraform validation directives available in AngularJS.

We'll talk about a few of the core validations, then we'll get into how to build your own validations.

AngularJS has many ves VES for verification. We will discuss several core verifications and then discuss how to build a validation.

1234	<form name="form" novalidate> <label name="email">Your email label> <input type="email" name="email" ng-model="email" placeholder="Email Address" /> form>

AngularJS makes it pretty easy for us to handle client-side form validations without adding a lot of extra effort.

Although we can't depend on client-side validations to keep our web application secure,

They do provide instant feedback of the state of the form.

AngularJS allows you to process client form verification without having to do a lot of extra work. Although you cannot rely on client verification to ensure application security, they can give you instant feedback on form status.

To use form validations,

We first must ensure that the form has a name associated with it,

Like in the above example.

To use form verification, we must first ensure that the form has a name, as shown in the preceding example.

All input fields can validate against some basic validations,

Like minimum length, maximum length, etc.

These are available on the new HTML5 attributes of a form.

You can perform basic verification on all input boxes, such as the minimum length and maximum length. These are the attributes of the new HTML5 form.

It is usually a great idea to useNovalidateFlag on the form element,

As it prevents the browser from natively validating the form.

Generally, addNovalidateAttribute is a good note. In this way, the form verification is blocked.

Let's look at all the validation options we have that we can place on an input field:

Let's take a look at the verification items that can be put on the input:

Required

To validate that a form input has been filled out,

We simply add the HTML5 tag,Required, To the input field:

1	<input type="text" required />

Minimum Length

To validate that a form input is at least a certain {number} of charaters,

We add the AngularJS directive ng-minlength = "{number}" to the input field:

1	<input type="text" ng-minlength=5 />

Maximum Length

To validate that a form input is equal to or less than a number of characters,

We can add the AngularJS directive ng-maxlength = "{number }":

1	<input type="text" ng-maxlength=20 />

Matches a Pattern

To ensure that an input matches a regex, we can use ng-pattern = "/PATTERN /";

1	<input type="text" ng-pattern="/a-zA-Z/" />

Email

To validate an email address in an input field, we simply set the input type to email, like so:

1	<input type="email" name="email" ng-model="user.email" />

URL

To validate that an input represents a URL, set the input type to url:

1	<input type="url" name="homepage" ng-model="user.facebook_url" />

Custom Validations

AngularJS makes it very easy to add our own validations, as well, by using ctictives.

For instance, let's say that we want to validate that our username is available in the database.

To do so, we'll implement a directive that fires an Ajax request whenever the form changes.

Similarly, AngularJS can easily build our own directives.

For example, we want to verify whether the user name is available. To achieve this goal, we execute a direve ve to trigger an ajax request when the form changes.

12345678910111213141516171819

angular.module('validationExample', []).directive('ensureUnique', function($http){ return { require: 'ngModel', link: function(scope, ele, attrs, c){ scope.$watch(attrs.ngModel, function(){ $http({ method: 'POST', url: '/api/check/" + attrs.ensureUnique, data: {'field': attrs.ensureUnique} }).success(function(data, status, headers, cfg){ c.$setValidity('unique', data.isUnique); }).error(function(data, status, headers, cfg){ c.$setValidity('unique', false); }); }); } } });

Control Variables in Forms

AngularJS makes properties available on the containing $ scope object available to us as a result

Setting a form inside of the DOM.

These properties enable us to react to the form in real time (just like everything else in AngularJS ).

The properties that are available to us are:

(Note that these properties are made availabel to us in the format :)

1	formName.inputFieldName.property

Unmodified Form

This property is a boolean that tells us whether the user has modified the form.

It is true if the user hasn' t touched the form, and false if they have:

1	formName.inputFieldName.$pristine

Modified Form

This property is a boolean that tells us if and only if the user has actually modified the form.

It is set regardless of validations on the form:

1	formName.inputFieldName.$dirty

Vaild Form

This property is a boolean that tells us whether or not the form is valid.

If the form is currently valid, then the following will be true:

1	formName.inputFieldName.$valid

Invalid Form

The property is a boolean that tells us whether or not the form is invalid.

If the form is currently invalid, then the following will be true:

1	formName.inputFieldName.$invalid

The last two properties are maid for showing or hiding DOM elements.

They are also very useful when setting a class on a particle form.

Errors

This property is another useful one that AngularJS makes available to us:$ ErrorObject.

This object contains all of the validations on a paticular form and a record of whether they are valid or invalid.

To get access to this property, use the following syntax:

1	formName.inputfieldName.$error

If a validation fails, then this property will be true; if it is false, then the value has passed the input field.

A Little Style Never Hurts

When AngularJS is handling a form,

It adds specific classes to the form based upon the current state of the form (I. e. if it's currently valid, unchanged, etc ).

These classes are named similarly to the properties that we can check, as well.

These classes are:

1234567

.ng-pristine {} .ng-dirty {} .ng-valid {} .ng-invalid {}

They correspond to their counterpart on the specified input field.

When a field is invalid, the. ng-invalid class will be applied to the field. This particle site sets the CSS class:

1234567891011

input.ng-invalid { border: 1px solid red; } input.ng-valid{ border: 1px solid green; }

To be continued