In this tutorial we will show you the solution of angularjs form validation on submit, using directives in angularjs we can validate our form elements and we can checks each and every elements is properly filled or not when user submitting form event then we our validate message will print on webpage.
We can create error message based on our own creation of rules also in this topic so user will gives input as our expecting way.
Step By Step Guide On Angularjs Form Validation On Submit :-
In our application we used directives of ‘ng-submit, ng-model, ng-show’. Ng-submit used to specify the functions to be run on submit events.
It can be used to prevent the form from submission if it does not contain an action.
The ng-show directive is used to show or hide the given HTML element according to the expression given to the ng-show attribute.
It shows the specified HTML element if the given expression is true, otherwise it hides the HTML element.
Ng-model is a directive which binds input, select and textarea, and stores the required user value in a variable whenever we require that value.
Step By Step Guide On Angularjs Form Validation On Submit :-
<!DOCTYPE html>
<html>
<head>
<title>form validation on submit</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app=angular.module('MyApp',[]);
app.controller('MyController',function($scope){
$scope.sendform=function(){
$scope.msg="form validated";
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<form name="pf" ng-submit="sendform()">
<input type="text" name="fn" ng-model="p.fn" required/>
<span ng-show="pf.fn.$error.required">required!</span>
<button type="submit">Submit</button>
<span>{{msg}}</span>
</form>
</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 and in application we need to append controller ‘MyController’ to the application ‘app’ variable for access all elements values.
- Using $scope object we defined our function ‘sendform()’ within that we printed ‘form validated’ message to the user.
- 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 ‘MyController’ by ng-controller directive.
- In form we specified name attribute of ‘pf’ and function ‘sendform()’ using ‘ng-submit’ directive we can call when form is submitted by user.
- For collecting ‘user name’ we defined ‘input’ tag with attribute of ‘ng-model, name’ values ‘p.fn,fn’.
- For displaying error message when user without filling input directly clicks on ‘submit’ button it is respective error message stored in ‘ng-show’ directive it will print when that particular error occurred.
- Button created for ‘submit’ option and lastly ‘<span>’ used to print result message of variable ‘msg’ on webpage.
- When printing anything on webpage we need to use double curly braces within variable name. All <div> tag needs to close respectively.
- 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 form validation on submit 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 within form when user filling form details it is checking whether valid or not then result will printed on webpage.
I hope this tutorial on angularjs form validation on submit helps you and the steps and method mentioned above are easy to follow and implement.
