Simple AngularJS Form Validation

Submitted by razormist on Thursday, February 16, 2017 - 20:07.
In this tutorial we will create a Simple AngularJs Form Validation. AngularJs is mostly used by a well known websites. It is a structural framework for dynamic web application for a better programming tools. Let's start coding Creating A Mark Up Form This is where the input field will be displayed. To do that copy/paste the code below then name it "index.html" 
  1. <!DOCTYPE html>
  2. <hmtl lang = "en">
  3. 	<head>
  4. 		<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" />
  5. 		<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
  6. 		<script src = "js/angular.js"></script>
  7. 		<script src = "js/app.js"></script>
  8. 	</head>
  9. <body ng-app = "myModule" ng-controller = "myController">
  10. 	<nav class = "navbar navbar-default">
  11. 		<div class = "container-fluid">
  12. 			<a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
  13. 		</div>
  14. 	</nav>
  15. 	<div class = "row">
  16. 		<div class = "col-md-4"></div>
  17. 		<div class = "col-md-4 well">
  18. 			<h3 class = "text-primary">Simple AngularJs Form Validation</h3>
  19. 			<hr style = "border-top:1px dotted #000;" />
  20. 				<form name = "signupfrm">
  21. 					<div class = "form-group">
  22. 						<label>Firstname</label>
  23. 						<input type = "text" class = "form-control" name = "firstname" ng-model = "member.firstname" required = "required"/>
  24. 						<center><span class = "text-success" ng-show = "signupfrm.firstname.$error.required">Required Field</span></center>
  25. 					</div>
  26. 					<div class = "form-group">
  27. 						<label>Lastname</label>
  28. 						<input type = "text" class = "form-control" name = "lastname" ng-model = "member.lastname" required = "required"/>
  29. 							<center><span class = "text-success" ng-show = "signupfrm.lastname.$error.required">Required Field</span></center>
  30. 					</div>
  31. 					<div class = "form-group">
  32. 						<label>Username</label>
  33. 						<input type = "text" class = "form-control" name = "username" ng-model = "member.username" required = "required"/>
  34. 							<center><span class = "text-success" ng-show = "signupfrm.username.$error.required">Required Field</span></center>
  35. 					</div>
  36. 					<div class = "form-group">
  37. 						<label>Password</label>
  38. 						<input type = "password" class = "form-control" name = "password" ng-model = "member.password" ng-minlength = "6"  required = "required"/>
  39. 							<center><span class = "text-success" ng-show = "signupfrm.password.$error.required">Required Field</span></center>
  40. 							<center><span class = "text-danger" ng-show = "signupfrm.password.$error.minlength">Password Too Short</span></center>
  41. 					</div>
  42. 					<div class = "Email">
  43. 						<label>Email</label>
  44. 						<input type = "email" class = "form-control" name = "email" ng-model = "member.email" required = "required" />
  45. 						<center><span class = "text-success" ng-show = "signupfrm.email.$error.required">Required Field</span></center>
  46. 						<center><span class = "text-danger" ng-show = "signupfrm.email.$error.email">Not A Valid Email</span></center>
  47. 					</div>
  48. 					<br />
  49. 					<div class = "form-group">
  50. 						<button class = "btn form-control" ng-disabled = "signupfrm.$invalid"><span class = "glyphicon glyphicon-save"></span> Submit</button>
  51. 					</div>
  52. 				</form>
  53. 		</div>
  54. 	</div>
  55. </body>
  56. </html>
The code above will process the result and validate the data when the user enter some value. The ng-show will display an error message when the input value didn't meet the requirement. AngularJs Directives This is where the angularjs directives will be called. Copy/paste the code below and name it "app.js" 
  1. var app = angular.module("myModule", []);
  2. app.controller("myController", function($scope){});
There you have it we created a simple form validation using angularjs. I hope that this tutorial help you to your project. For more updates and tutorials just visit this site. Enjoy Coding!!

Tags

Add new comment

About text formats
  • 28 views