AngularJS Tutorial
Misc
- angularjs-simple-datepicker-directive-example
Angular 7 Tutorial
Angular 7 Directives
Angular 7 Databinding
Angular 7 Pipes
- angular-7-pipes
Error Fixing
- angular-7-error-fixing
Angular 7 Forms
Angular Misc
- angular-vs-react
Angular + Spring
Interview Questions

AngularJS Form Validation

AngularJS provides client-side form validation. It checks 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.

Following directives are generally used to track errors in an AngularJS form:

$dirty - states that value has been changed.
$invalid - states that value entered is invalid.
$error - states the exact error.

AngularJS Form Validation Example

<!DOCTYPE html>
 <html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
 <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: lightpink;
         }
         
         table tr:nth-child(even) {
            background-color: lightyellow;
         }
      </style>
      
   </head>
   <body>
      
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <form name = "studentForm" novalidate>
            <table border = "0">
               <tr>
                  <td>Enter first name:</td>
                  <td><input name = "firstname" type = "text" ng-model = "firstName" required>
                     <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                        <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Enter last name: </td>
                  <td><input name = "lastname"  type = "text" ng-model = "lastName" required>
                     <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
                        <span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
                     <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
                        <span ng-show = "studentForm.email.$error.required">Email is required.</span>
                        <span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
                     </span>
                  </td>
               </tr>
                <tr>
                  <td>
                     <button ng-click = "reset()">Reset</button>
                  </td>
                  <td>
                     <button ng-disabled = "studentForm.firstname.$dirty &&
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
                        studentForm.lastname.$invalid || studentForm.email.$dirty &&
                        studentForm.email.$invalid" ng-click="submit()">Submit</button>
                  </td>
               </tr>
	 </table>
         </form>
      </div>
        <script>
         var mainApp = angular.module("mainApp", []);
         mainApp.controller('studentController', function($scope) {
            $scope.reset = function(){
               $scope.firstName = "Sonoo";
               $scope.lastName = "Jaiswal";
               $scope.email = "sonoojaiswal@tutorialsinfo.com";
            }
             $scope.reset();
         });
      </script>
     </body>
</html>

Next TopicAngularJS AJAX

← prev next →

Hot Tutorials

Contact US

Email:[email protected]

AngularJS Tutorial

Misc

Angular 7 Tutorial

Angular 7 Directives

Angular 7 Databinding

Angular 7 Pipes

Error Fixing

Angular 7 Forms

Angular Misc

Angular + Spring

Interview Questions

AngularJS Form Validation

AngularJS Form Validation Example

Hot Tutorials

Contact US