AngularJS can validate input data.

Form 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.

Client-side validation cannot alone secure user input. Server side validation is also necessary.

Required

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>

 

E-mail

Use the HTML5 type email to specify that the value must be an e-mail:

Example

The input field has to be an e-mail:

<form name="myForm">
  <input name="myInput" ng-model="myInput" type="email">
</form>

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

 

Form State and Input State

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.

You can use these states to show meaningful messages to the user. Example, if a field is required, and the user leaves it blank, you should give the user a warning:

Example

Show an error message if the field has been touched AND is empty:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

 

CSS Classes

AngularJS adds CSS classes to forms and input fields depending on their states.

The following classes are added to, or removed from, input fields:

• ng-untouched The field has not been touched yet
• ng-touched The field has been touched
• ng-pristine The field has not been  modified yet
• ng-dirty The field has been modified
• ng-valid The field content is valid
• ng-invalid The field content is not valid
• ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
• ng-invalid-key Example: ng-invalid-required

The following classes are added to, or removed from, forms:

• ng-pristine No fields has not been modified yet
• ng-dirty One or more fields has been modified
• ng-valid The form content is valid
• ng-invalid The form content is not valid
• ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
• ng-invalid-key Example: ng-invalid-required

The classes are removed if the value they represent is false.

Add styles for these classes to give your application a better and more intuitive user interface.

Example

Apply styles, using standard CSS:

<style>

input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}

</style>

Forms can also be styled:

Example

Apply styles for unmodified (pristine) forms, and for modified forms:

<style>

form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}

</style>

Custom Validation

To create your own validation function is a bit more tricky; You have to add a new directive to your application, and deal with the validation inside a function with certain specified arguments.

Example

Create your own directive, containing a custom validation function, and refer to it by using my-directive.

The field will only be valid if the value contains the character "e":

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>

var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);