AngularJS Form Validation

In AngularJS $invalid, $valid and $error property is used to validate form fields (input, textarea and select) client-side. Find AngulaJS ng-form Properties like $valid, $invalid, $dirty, $error from below list.

Syntax

<div ng-form="formName"></div>

AngulaJS Form Validation Properties

Property	Description
$valid	It is used to check inputs are valid or not.
$invalid	It is used to check inputs are invalid or not.
$pristine	It is used to check inputs are unmodified by the user or not.
$dirty	It is used to check inputs are modified by the user or not. Its just revers of pristine.
$error	This contains collection of invalid control's input, if a validation fail it return true, otherwise false.

AngularJS Form Validation Example

<!doctype html>
<html ng-app>  
<head>  
<title>My first AngularJS ng-form Directive code</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">  
</script> 
 <script>
   function formData($scope) {
   $scope.userName = 'Jimi Scotts';
   $scope.email = 'jimi.s@aol.com';
   $scope.password = '1234';
   }
  </script>
<style>
.error {
  border: 1px solid #FF552A;
  color:#FF552A;
}
</style>
</head>  
<body>  
<form name="login" ng-controller="formData" novalidate>  
  <div ng-form="loginform">
    <p>
    User Name : 
    <input type="text" name="userName" ng-model="userName" placeholder="User Name" required/>  
    <div ng-show="loginform.userName.$dirty && loginform.userName.$invalid">  
      <span class="error" ng-show="loginform.userName.$error.required">
	  User name is required.
	  </span>  
    </div>  
    </p>
  <p>Email : 
    <input type="email" name="email" ng-model="email" placeholder="Email ID" required/>  
    <div ng-show="loginform.email.$dirty && loginform.email.$invalid">  
      <span class="error" ng-show="loginform.email.$error.required">
	  Email is required.
	  </span>
      <span class="error" ng-show="loginform.email.$error.email">  
      Enter a valid email.
	  </span>  
    </div>
  </p>

  <p>Password : 
    <input type="password" name="pass" ng-model="password" placeholder="Password" required/>  
    <div ng-show="loginform.pass.$dirty && loginform.pass.$invalid">  
      <span class="error" ng-show="loginform.pass.$error.required">
	  Password is required.
	  </span>  
    </div>
  </p>
  </div>  
  <button type="submit" ng-disabled="(login.loginform.userName.$dirty 
  && login.loginform.userName.$invalid)  
  || (login.loginform.email.$dirty && login.loginform.email.$invalid) 
  || login.loginform.pass.$dirty 
  && login.loginform.pass.$invalid">Submit Form</button>  
</form>   
  
</body>  
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS Form Validation

AngulaJS Form Validation Properties

AngularJS Form Validation Example

Recent Articles