I am going to share the interesting topic to validate input form, This input form contains to
All the above are used to ng-pattern attribute to validate to each field. The Example code as given below
- Required input text field.
- input phone number.
- input web URL address.
- Email validation etc.
<!doctype html>
<html>
<head>
<title>angularjs form validation</title>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<style>
.error {
color: red;
}
</style>
<script>
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
$scope.username = '';
$scope.word = /^\s*\w*\s*$/;
$scope.webURL = '';
$scope.phoneNumbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;
});
</script>
</head>
<body ng-app="myApp">
<ng-form name="myForm" ng-controller="mainCtrl">
<div>UserName :</div>
<div>
<input type="text" name="username" ng-model="username" ng-pattern="word" required>
<span class="error" ng-show="myForm.username.$error.required">Required!</span>
</div>
<div>URL :</div>
<div>
<input type="url" name="webURL" ng-model="webURL" required>
<span class="error" ng-show="myForm.webURL.$error.required">Required!</span>
<span class="error" ng-show="myForm.webURL.$error.url">Not valid url!</span>
</div>
<div>EmailId :</div>
<div>
<input type="email" placeholder="Email" name="email" ng-model="m_email" ng-minlength=3 ng-maxlength=20 required />
<span class="error" ng-show="myForm.email.$error.required">Required!</span>
<span class="error" ng-show="myForm.email.$error.minlength">Not less that 3 char</span>
<span class="error" ng-show="myForm.email.$error.email">Invalid Email!</span>
</div>
<div>Phone No. :</div>
<div>
<input type="text" placeholder="+91-036-78658" name="phone" ng-pattern="phoneNumbr" ng-model="phone" />
<span class="error" ng-show="myForm.phone.$error.required">Required!</span>
<span class="error" ng-show="myForm.phone.$error.minlength">Phone no not less that 10 char.</span>
<span class="error" ng-show="myForm.phone.$error.maxlength">Phone no not more than 11 char.</span>
<span class="error" ng-show="myForm.phone.$error.pattern">Please match pattern [+91-036-78658 or 91-036-78658 ]</span>
</div>
<div>
<input type="button" value="Submit">
</div>
</ng-form>
</body>
</html>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
