Simple AngularJS Form Validation

Submitted by: 
Language: 
Visitors have accessed this post 775 times.

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 = "<a href="https://www.sourcecodester.com">Sourcecodester</a>
  13. " rel="nofollow">https://www.sourcecodester.com">Sourcecodester</a>
  14. </a> </div>
  15. </nav>
  16. <div class = "row">
  17. <div class = "col-md-4"></div>
  18. <div class = "col-md-4 well">
  19. <h3 class = "text-primary">Simple AngularJs Form Validation</h3>
  20. <hr style = "border-top:1px dotted #000;" />
  21. <form name = "signupfrm">
  22. <div class = "form-group">
  23. <label>Firstname</label>
  24. <input type = "text" class = "form-control" name = "firstname" ng-model = "member.firstname" required = "required"/>
  25. <center><span class = "text-success" ng-show = "signupfrm.firstname.$error.required">Required Field</span></center>
  26. </div>
  27. <div class = "form-group">
  28. <label>Lastname</label>
  29. <input type = "text" class = "form-control" name = "lastname" ng-model = "member.lastname" required = "required"/>
  30. <center><span class = "text-success" ng-show = "signupfrm.lastname.$error.required">Required Field</span></center>
  31. </div>
  32. <div class = "form-group">
  33. <label>Username</label>
  34. <input type = "text" class = "form-control" name = "username" ng-model = "member.username" required = "required"/>
  35. <center><span class = "text-success" ng-show = "signupfrm.username.$error.required">Required Field</span></center>
  36. </div>
  37. <div class = "form-group">
  38. <label>Password</label>
  39. <input type = "password" class = "form-control" name = "password" ng-model = "member.password" ng-minlength = "6" required = "required"/>
  40. <center><span class = "text-success" ng-show = "signupfrm.password.$error.required">Required Field</span></center>
  41. <center><span class = "text-danger" ng-show = "signupfrm.password.$error.minlength">Password Too Short</span></center>
  42. </div>
  43. <div class = "Email">
  44. <label>Email</label>
  45. <input type = "email" class = "form-control" name = "email" ng-model = "member.email" required = "required" />
  46. <center><span class = "text-success" ng-show = "signupfrm.email.$error.required">Required Field</span></center>
  47. <center><span class = "text-danger" ng-show = "signupfrm.email.$error.email">Not A Valid Email</span></center>
  48. </div>
  49. <br />
  50. <div class = "form-group">
  51. <button class = "btn form-control" ng-disabled = "signupfrm.$invalid"><span class = "glyphicon glyphicon-save"></span> Submit</button>
  52. </div>
  53. </form>
  54. </div>
  55. </div>
  56. </body>
  57. </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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.