Angular Form Validation

Go to any popular site with a registration form, and you will notice that they give you feedback when you don’t enter your data in the format they are expecting. You’ll get messages like:

“This field is required” (you can’t leave this field blank)
“Please enter your phone number in the format xxx-xxxx” (it wants three numbers followed by a dash, followed by four numbers)
“Please enter a valid e-mail address” (the thing you’ve entered doesn’t look like a valid e-mail address)
“Your password needs to be between 8 and 30 characters long, and contain one uppercase letter, one symbol, and a number” (seriously?)

This is called form validation — when you enter data, the web application checks it to see if it is correct. If correct, the application allows the data to be submitted to the server and (usually) saved in a database; if not, it gives you error messages to explain what you’ve done wrong (provided you’ve done it right). Form validation can be implemented in a number of different ways.

The truth is that none of us like filling out forms — there is a lot of evidence to show that users get annoyed by forms, and it will cause them to leave and go somewhere else if they are done poorly. In short, forms suck.

We want to make filling out web forms as painless as possible. So why do we insist on blocking our users at every turn? There are three main reasons:

We want to get the right data, in the right format — our applications won’t work properly if our user’s data is stored in any old format they like, or if they don’t enter the correct information in the correct places, or omit it altogether.
We want to protect our users — if they enter an easy-to-guess password, or no password at all, malicious users can easily get into their accounts and steal their data.
We want to protect ourselves — there are many ways that malicious users can misuse unprotected forms to damage the application they are part of (see Website security).

Different types of form validation

There are different types of form validation that you’ll encounter on the web:

Client-side validation is validation that occurs in the browser, before the data has been submitted to the server. This is more user-friendly than server-side validation as it gives an instant response. This can be further subdivided:
JavaScript validation is coded using JavaScript. It is completely customizable.
Built-in form validation is done with HTML5 form validation features, and generally doesn’t require JavaScript. This has better performance, but it is not as customizable.
Server-side validation is validation that occurs on the server, after the data has been submitted — server-side code is used to validate the data before it is put into the database. If the data is wrong, a response is sent back to the client to tell the user what went wrong. Server-side validation is not as user-friendly as client-side validation, as it requires a round trip to the server, but it is your application’s last line of defense against bad (meaning incorrect, or even malicious) data. All popular server-side frameworks have features for validating and sanitizing data (making it safe).

AngularJS Validation
AngularJS offers client-side form validation.

AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.

AngularJS also holds information about whether they have been touched, or modified, or not.

You can use standard HTML5 attributes to validate input, or you can make your own validation functions.

Use the HTML5 attribute required to specify that the input field must be filled out:
Example

The input field is required:
<form name=”myForm”>
<input name=”myInput” ng-model=”myInput” required>
</form>

<p>The input’s valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

AngularJS is constantly updating the state of both the form and the input fields.

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.