AngularJS Input Validation
AngularJS forms and
controls can validate input data.
Input Validation
In the previous chapter, you learned about AngularJS forms and controls.
AngularJS forms and controls can provide validation services, and notify
users of invalid input.
|
Client-side validation cannot alone secure user input. Server side
validation is also necessary. |
Application Code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<h2>Validation Example</h2>
<form ng-app=""
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>
function validateCtrl($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
}
</script>
</body>
</html>
Try it Yourself »
|
The HTML form attribute novalidate is used to disable default
browser validation. |
Example Explained
The AngularJS directive ng-model binds the input elements to
the model.
The model object has two properties: user and email.
Because of ng-show, the spans with color:red are displayed only
when user or email is $dirty and $invalid.
Color Picker