« Previous Next »

AngularJS Form Validation

AngularJS can validate input data..

Form Validation

AngularJS offers client-side form validation.

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

It also tracks whether the fields have been touched, modified, or left untouched.

You can use standard HTML5 attributes like required, minlength, or write your own validation functions.

Required

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

Output :


E-mail

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

Output :


Form State and Input State

AngularJS constantly updates the state of the form and the input fields.

Input field states:

  • $untouched – Field not touched yet
  • $touched – Field has been touched
  • $pristine – Field not modified
  • $dirty – Field has been modified
  • $invalid – Invalid content
  • $valid – Valid content

Form states:

  • $pristine – No fields modified
  • $dirty – One or more modified
  • $invalid – Form is invalid
  • $valid – Form is valid
  • $submitted – Form has been submitted

Use these states to show helpful messages. For example, warn the user if a required field is left blank.

Output :


CSS Classes in AngularJS

AngularJS automatically adds or removes CSS classes to input fields and forms based on their validation state.

Input Field Classes:

  • ng-untouched – Not yet touched
  • ng-touched – Has been touched
  • ng-pristine – Not modified
  • ng-dirty – Modified
  • ng-valid – Content is valid
  • ng-invalid – Content is invalid
  • ng-valid-required, ng-invalid-required – Specific to `required` validation

Form Classes:

  • ng-pristine – No fields modified
  • ng-dirty – One or more fields modified
  • ng-valid – Form is valid
  • ng-invalid – Form is invalid

✅ These classes help create dynamic styles and give users feedback (e.g., red border for invalid input).

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

Output :

Forms can also be styled:

These classes let you style your form fields and entire forms based on their validation state.

AngularJS applies ng-pristine and ng-dirty classes to the <form>, and styles it accordingly (lightblue when untouched, pink when modified). ✅

Output :


Custom Validation

To create your own validation function is a bit more tricky. You need to:

✅ Create a new directive in your AngularJS application
✅ Handle the validation logic inside a function using specific arguments
✅ Attach your directive to an input field

In the following example, we create a directive called my-directive. The input field will only be valid if the value contains the character "e".

Below is a complete example demonstrating this validation in action.

Output :

In HTML, the new directive will be referred to by using the attribute my-directive.

In the JavaScript, we start by adding a new directive named myDirective.

Remember, when naming a directive, you must use a camelCase name like myDirective, but when using it in HTML, you must refer to it with kebab-case: my-directive.

Then, return an object where you specify that it requires ngModel, which refers to the ngModelController.

Next, create a linking function that takes several arguments. The fourth argument, often called mCtrl, is the actual model controller.

Inside that link function, define your custom validation function — for example, one that checks if the input value contains the letter "e". Based on the check, you use mCtrl.$setValidity() to mark the input as valid or invalid.

Finally, use mCtrl.$parsers.push(myValidation) to add your validation function to AngularJS’s input parsing pipeline. This ensures the validation runs every time the input value changes.



Validation Example

Understanding ng-model and Validation States

The AngularJS directive ng-model binds the input elements to the model.

In this case, the model object has two properties: user and email.

Output :
« Previous Next »