Hello everyone, Today's going to share the code sample of email/form validation using angularjs. This is the very simple and useful to validate an email input text box after clicking on validate button.
If you need to validate an email then first use input type="email" and of type="text" etc.
In angularjs, different types of validation like.
I am going to explain two example one is very basic using required and other example is used email regular expression. Both example as given below.
Example1 : Required field validation
Example2 : Number validation using ng-pattern with regular expression
The output as given below image.
Example3 : Email regular expression using broadcast
email regular expression: [/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/]
The code sample of email validation in angularjs as give below.
If you need to validate an email then first use input type="email" and of type="text" etc.
In angularjs, different types of validation like.
- Required field
- Minimum length
- Maximum length
- ng-pattern etc.
I am going to explain two example one is very basic using required and other example is used email regular expression. Both example as given below.
Example1 : Required field validation
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script>
function MainCtrl($scope) {
$scope.emailId = '';
}
</script>
</head>
<body>
<form name="myForm" ng-controller="MainCtrl">
Email *:
<input type="email" name="inputtext" ng-model="emailId" required>
<span class="error" ng-show="myForm.inputtext.$error.required">Required!</span>
<span class="error" ng-show="myForm.inputtext.$error.email">Not valid email!</span>
<lable>{{text}}</lable>
</form>
</body>
</html>
The out put look like below image
Example2 : Number validation using ng-pattern with regular expression
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ng pattern validation in angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
</head>
<body>
<form name="myform">
<input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/">
<input type="submit">
</form>
</body>
</html>
Example3 : Email regular expression using broadcast
email regular expression: [/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/]
The code sample of email validation in angularjs as give below.
<!doctype html>
<html ng-app="formValidation">
<head>
<meta charset="utf-8">
<title>form validation in angularjs</title>
<style>
.error {
color: #B94A48;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script>
var app = angular.module('formValidation', []);
app.controller('mainCtrl', function($scope) {
$scope.emp = {
email: '' "
};
$scope.validate = function() {
$scope.$broadcast('Validations');
};
});
app.directive('checkEmailType', function() {
//email regular expression.
var emailRegul = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
return {
require: 'ngModel',
link: function(scope, elm, attr, ctrl) {
function doValidate() {
if (emailRegul.test(elm.val())) {
ctrl.$setValidity('EmailId', true);
} else {
ctrl.$setValidity('EmailId', false);
}
};
scope.$on('Validations',
doValidate);
}
};
});
</script>
</head>
<body ng-controller="mainCtrl">
<ng-form name="myForm">
<label>Email Id*</label>
<input check-email-type type="text" name="Email" ng-model="emp.email">
<span ng-show="myForm.Email.$error.EmailId" ng-class="{error: myForm.Email.$invalid}">Please enter valid email.</span>
<button ng-click="validate()">Validate
Submit Form</button>
</ng-form>
</body>
</html>
The out put look like below image.