---
title: "Explain the Custom validation in AngularJS"  
description: "Let's understand custom validation in Angularjs, how it works, and how you can create your own validation."  
author: "Ashutosh Patel"  
published: 2025-04-23  
updated: 2025-11-05  
canonical: https://www.mindstick.com/articles/339110/explain-the-custom-validation-in-angularjs  
category: "angular js"  
tags: ["angular js", "angularJS form"]  
reading_time: 2 minutes  

---

# Explain the Custom validation in AngularJS

AngularJS has built-in validation (such as `required`, `email`, `minlength`, etc.), but **[custom validation](https://www.mindstick.com/forum/1973/custom-validation-attribute)** allows you to,

- Define your own logic for [input validation](https://www.mindstick.com/forum/1335/input-validation-and-ui-exceptions-with-mvvm-light).
- Display custom [error messages](https://answers.mindstick.com/qa/99815/how-can-you-diagnose-and-resolve-issues-with-application-crashes-or-error-messages).
- Integrate with AngularJS's form validation conditions.

#### How Validation Works in AngularJS

Angular uses [directives](https://www.mindstick.com/articles/336201/directives-in-angularjs) and validation conditions such as given below,

`$valid`, `$invalid`, `$touched`, `$dirty`, etc. You can create a **[custom directive](https://www.mindstick.com/articles/335813/create-custom-directive-in-angularjs)** to plug your own validation logic into this system.

**Example:** Validate that a username does not contain spaces

```html
<!DOCTYPE html>
<html ng-app="validationApp">
<head>
 <title>Angular Custom Validation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="FormController">
  <form name="userForm">
    <label>Username:</label>
    <input type="text" name="username" ng-model="username" no-space required />
    <p ng-show="userForm.username.$error.required && userForm.username.$touched" style="color: red;">
      Username is required.
    </p>
    <p ng-show="userForm.username.$error.noSpace" style="color: red;">
      Username should not contain spaces.
    </p>
  </form>
  <script>
   var app = angular.module('validationApp', []);
   app.controller('FormController', function($scope) {
     $scope.username = '';
   });
   app.directive('noSpace', function() {
     return {
       require: 'ngModel',
       link: function(scope, element, attrs, ctrl) {
         ctrl.$validators.noSpace = function(modelValue, viewValue) {
           var value = modelValue || viewValue;
           return value && value.indexOf(' ') === -1;
         };
       }
     };
   });
 </script>
</body>
</html>
```

## Summary

`no-space`: [Custom attribute](https://www.mindstick.com/interview/492/how-do-you-specify-a-custom-attribute-for-the-entire-assembly-rather-than-for-a-class) directive

`ctrl.$validators.noSpace`: [Register](https://answers.mindstick.com/qa/49005/what-year-was-cash-register-invented-and-how) a new [validator](https://www.mindstick.com/interview/598/give-the-details-of-xml-files-used-in-validator-framework)

`value.indexOf(' ') === -1;`: Return `false` if space found.

`userForm.username.$error.noSpace`: Error shown if [validation fails](https://www.mindstick.com/forum/34291/how-to-raise-a-callback-when-asp-dot-net-mvc-client-validation-fails)

**Also, read:** [Form Validation in Angularjs](https://www.mindstick.com/articles/336202/form-validation-in-angularjs)

---

Original Source: https://www.mindstick.com/articles/339110/explain-the-custom-validation-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
