AngularJS Validation

by Online Tutorials Library July 14, 2022

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

              <title>Angular JS Forms</title>       <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://www.tutoraspire.com/wp-content/cache/min/1/ajax/libs/angularjs/1.3.14/angular.min.js?ver=1693438890"></script>                                       
<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" ng-model="firstName" required="" type="text">                      <span ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid" style="color:red">                         <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" ng-model="lastName" required="" type="text">                      <span ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid" style="color:red">                         <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>                      </span>                   </td>
</tr>
<tr>
<td>Email: </td>
<td><input length="100" name="email" ng-model="email" required="" type="email">                      <span ng-show="studentForm.email.$dirty && studentForm.email.$invalid" style="color:red">                         <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-click="submit()" ng-disabled="studentForm.firstname.$dirty && 
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty && 
                        studentForm.lastname.$invalid || studentForm.email.$dirty && 
                        studentForm.email.$invalid">Submit</button>                   </td>
</tr>
</table></form>
</div>
<p>                  </p>

Next TopicAngularJS AJAX

AngularJS Validation

AngularJS Form Validation

AngularJS Form Validation Example

AngularJS AJAX

Cordova App Templates

You may also like