AngularJS Email Validation In Controller
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Ashish
In this tutorial we will show you the solution of angularjs email validation in controller, using directives in angularjs we can validate our form elements we used directive of ng-pattern for validate email when user enters email on input field.
Here we validating our form using ‘$valid’ and this is used to monitors the state of the form and input fields and let you notify the user about the current state.
Step By Step Guide On AngularJS Email Validation In Controller :-
In our application we used directives of ‘ng-pattern’ for validating our user input email. It is used to define format of particular input contains which are needs to present and other than in pattern we defined formats found needs to throw error on webpage.
Using ‘ng-show’ when we needs to show error it will helps to show error message near input element.
We defined two types of error one is for user can’t leave without filling any input fields and another one is for checks email formats.
<!DOCTYPE HTML>
<html>
<head>
<title>Email Validation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("ctrl",function($scope){
$scope.frmt=/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
});
</script>
</head>
<body>
<div ng-app="myapp" ng-controller="ctrl">
<form name="fn" ng-submit="fn.$valid" novalidate>
<input type="text" name="input" ng-model="text"
ng-pattern="frmt" required>
<span class="error" ng-show="fn.input.$error.required" >Required!</span><br>
<span class="error" ng-show="fn.input.$error.pattern" >Not Valid Email!</span><br>
</form>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- We created ‘app’ variable used to store our application ‘myapp’ and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements values.
- Using $scope object we defined our function within function we defined our email pattern detail and stored to ‘ng-patter’ value of ‘frmt’ with the help of ‘$scope’ object because using $scope we can access any html element values.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- Within a <div> tag we defined our ng-app namely ‘myapp’ it defines our application and controller of application namely ‘ctrl’ by ng-controller directive.
- In form we specified name attribute of ‘fn’ and directive ‘ng-submit’ with value ‘fn.$valid’ using ‘ng-submit’ directive we can call when form is submitted by user and $valid object validating form.
- For collecting ‘user email id’ we defined ‘input’ tag with directive of ‘ng-model,ng-pattern’ values ‘text,frmt’ with required it is help to makes all form elements to become mandatory.
- Using <span> tag we displayed our error message with ‘ng-show’ it will show error message when user input wrong format or null.
- Before executing program we needs to check whether all html pair elements closed or not.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know email validation in controller using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user enters their email id it will check overall pattern then only error message will disappear otherwise it shows error message near input field.
So user can handle carefully when entering inputs.
I hope this tutorial on angularjs email validation in controller helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
