Google News
logo
AngularJS Validations
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.

It also holds the information about whether the input fields have been touched, or modified, or not.

AngularJS provides the following properties for controls for validation purposes

$dirty : Returns that value has been changed.
$valid  : Returns true if the model is valid
$invalid : Returns that value entered is invalid.
$error : Returns the exact error.
$pristine : Returns true if the user has not interacted with control yet else returns false.
$touched : Returns true if the user has tabbed out from the control.
$untouched : Returns true if the user has not tabbed out from the control.
AngularJS Form Validation Example
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Form Validations</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
 
 <style type="text/css">
 table, th , td {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
border: 1px solid #0099da;
border-collapse: collapse;
padding: 7px 20px 7px 7px;
 }
 
 table tr:nth-child(odd) {
background-color: #EEE;
 }
 
 table tr:nth-child(even) {
background-color: #F69F9F9;
 }
 .custom_form{ height:20px; width:100%; border-radius:2px; padding:3px 5px;}
 .custom_btn{ background:#0099da; padding:6px 15px; border-radius:2px; color:#FFF;}
 .custom_btn:hover{ background:#069;}
</style>
      
</head>
<body>

<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="webDetails">
 
<form name="websiteDetails" novalidate>
<table border="0">
   <tr>
      <td>Enter website name</td>
      <td><input name="websiteName" type="text" ng-model="websiteName" class="custom_form" required>
         <span style = "color:red" ng-show = "websiteDetails.websiteName.$dirty && websiteDetails.websiteName.$invalid">
            <span ng-show = "websiteDetails.websiteName.$error.required">First Name is required.</span>
         </span>
      </td>
   </tr>
   
   <tr>
      <td>Enter website URL</td>
      <td><input name="websiteURL"  type="text" ng-model="websiteURL" class="custom_form" required>
         <span style="color:red" ng-show="websiteDetails.websiteURL.$dirty && websiteDetails.websiteURL.$invalid">
            <span ng-show = "websiteDetails.websiteURL.$error.required">Last Name is required.</span>
         </span>
      </td>
   </tr>
   
   <tr>
      <td>Enter Email ID</td><td><input name="email" type="email" ng-model="email" length="150" class="custom_form" required>
         <span style = "color:red" ng-show = "websiteDetails.email.$dirty && websiteDetails.email.$invalid">
            <span ng-show = "websiteDetails.email.$error.required">Email is required.</span>
            <span ng-show = "websiteDetails.email.$error.email">Invalid email address.</span>
         </span>
      </td>
   </tr>
   
   <tr>
      <td>&nbsp;</td>
      <td>
         <button ng-disabled="websiteDetails.websiteName.$dirty &&
            websiteDetails.websiteName.$invalid || websiteDetails.websiteURL.$dirty &&
            websiteDetails.websiteURL.$invalid || websiteDetails.email.$dirty &&
            websiteDetails.email.$invalid" ng-click="submit()" class="custom_btn">Submit</button>
            <button ng-click="reset()" class="custom_btn">Reset</button>
      </td>
   </tr>

</table>
</form>
</div>

<script type="text/javascript">
 var mainApp = angular.module("mainApp", []);
 
 mainApp.controller('webDetails', function($scope) {
    $scope.reset = function(){
       $scope.websiteName="Free Time Learn";
       $scope.websiteURL="www.freetimelearning.com";
       $scope.email="info@freetimelearning.com";
    }
    
    $scope.reset();
 });
</script>

</body>
</html>
Output :