AngularJS Input Validation
AngularJS forms and controls can validate input data.
Input Validation
In the previous few chapters, you have learned about AngularJS forms and controls.
AngularJS forms and controls can provide validation functionality and warn users about illegal input data.
| | Client-side validation does not ensure the security of user input data, so server-side data validation is also necessary. | | --- | --- |
Application Code
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
| | The HTML form attribute novalidate is used to disable the browser's default validation. | | --- | --- |
Example Analysis
AngularJS ng-model directive binds input elements to the model.
The model object has two properties: user and email.
We used the ng-show directive with color:red to display the message when both $dirty and $invalid are true.
| Attribute | Description |
|---|---|
| $dirty | The form has been filled out |
| $valid | The field content is valid |
| $invalid | The field content is invalid |
| $pristine | The form has not been filled out |