Post
Ask Question

AngularJS Form - Validation (Email and number) Example

AngularJS Form - Validation Example
  1. Create an HTML file - index.html.
  2. Create a JS file - script.js.
  3. Create a CSS file - style.css.
Paste the code given below in index.html.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
  5. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  6. <script src="script.js"></script>
  7. <link rel="stylesheet" href="style.css" >
  8. </head>
  10. <body>
  11. <h3>AngularJS Form - Validation Example</h3>
  13. <form ng-app="" ng-controller="validationCtrl" name="sampleForm" novalidate>
  14. <div class="form-group">
  15. <p>
  16. <label class="control-label">Full Name:</label>
  17. <input type="text" ng-minlength="5" class="form-control" name="username" ng-model="username" placeholder="Ex - John DD" required >
  18. <span style="color:red" ng-show="sampleForm.username.$dirty && sampleForm.username.$invalid">
  19. <span ng-show="sampleForm.username.$error.required">Please enter your name.</span>
  20. <span ng-show="sampleForm.username.$error.minlength">Please enter full name.</span>
  21. </span>
  22. </p>
  23. <p>
  24. <label class="control-label">Email Address:</label>
  25. <input type="email" class="form-control" name="email" ng-model="email" placeholder="Ex - [email protected]" required>
  26. <span style="color:red" ng-show="sampleForm.email.$dirty && sampleForm.email.$invalid" />
  27. <span ng-show="sampleForm.email.$error.required">Please enter email address.</span>
  28. <span ng-show="sampleForm.email.$error.email">Please enter valid email address.</span>
  29. </p>
  30. <p>
  31. <label class="control-label">Mobile Number:</label>
  32. <input ng-minlength="10" ng-maxlength="10" type="number" class="form-control" name="mobile" ng-model="mobile" placeholder="Ex - 1234567890" required>
  33. <span style="color:red" ng-show="sampleForm.mobile.$dirty && sampleForm.mobile.$invalid"/>
  34. <span ng-show="sampleForm.mobile.$error.required">Please enter mobile number.</span>
  35. <span ng-show="sampleForm.mobile.$error.minlength || sampleForm.mobile.$error.maxlength">phone number should be 10 digits.</span>
  37. </p>
  38. <p>
  39. <input type="button" text="Reset" value="Reset" ng-click="reset()"></input>
  40. <input type="submit" class="btn btn-primary" ng-click="checkData()"
  41. ng-disabled="sampleForm.user.$dirty && sampleForm.user.$invalid || sampleForm.email.$dirty && sampleForm.email.$invalid || sampleForm.mobile.$dirty && sampleForm.mobile.$invalid || sampleForm.$invalid">
  42. </p>
  43. </div>
  44. </form>
  46. </body>
  47. </html>
Paste the code given below in script.js
  1. function validationCtrl($scope) {
  4. $scope.reset = function(){
  5. $scope.username = "";
  6. $scope.email = "";
  7. $scope.mobile = "";
  8. }
  10. $scope.isFormValid = function() {
  11. alert('form valid?: ', $scope.formValid);
  13. if (isFormValid)
  14. { alert("all data are valid."); }
  15. else
  16. { alert("all data are not valid."); }
  18. }
  19. }
Paste the code given below in style.css
  1. .ng-invalid.ng-dirty{
  2. border-color: #FA787E;
  3. }
  4. .ng-valid.ng-dirty{
  5. border-color: #78FA89;
  6. }
  8. body{
  9. padding: 10px;
  10. }
  12. label {
  13. font-weight: bold;
  14. display: block;
  15. width: 150px;
  16. float: left;
  17. }
Open the index page in the Browser.
Please refer to the links given below for more details