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>
  9. <body>
  10. <h3>AngularJS Form - Validation Example</h3>
  11. <form ng-app="" ng-controller="validationCtrl" name="sampleForm" novalidate>
  12. <div class="form-group">
  13. <p>
  14. <label class="control-label">Full Name:</label>
  15. <input type="text" ng-minlength="5" class="form-control" name="username" ng-model="username" placeholder="Ex - John DD" required >
  16. <span style="color:red" ng-show="sampleForm.username.$dirty && sampleForm.username.$invalid">
  17. <span ng-show="sampleForm.username.$error.required">Please enter your name.</span>
  18. <span ng-show="sampleForm.username.$error.minlength">Please enter full name.</span>
  19. </span>
  20. </p>
  21. <p>
  22. <label class="control-label">Email Address:</label>
  23. <input type="email" class="form-control" name="email" ng-model="email" placeholder="Ex - [email protected]" required>
  24. <span style="color:red" ng-show="sampleForm.email.$dirty && sampleForm.email.$invalid" />
  25. <span ng-show="sampleForm.email.$error.required">Please enter email address.</span>
  26. <span ng-show="sampleForm.email.$error.email">Please enter valid email address.</span>
  27. </p>
  28. <p>
  29. <label class="control-label">Mobile Number:</label>
  30. <input ng-minlength="10" ng-maxlength="10" type="number" class="form-control" name="mobile" ng-model="mobile" placeholder="Ex - 1234567890" required>
  31. <span style="color:red" ng-show="sampleForm.mobile.$dirty && sampleForm.mobile.$invalid"/>
  32. <span ng-show="sampleForm.mobile.$error.required">Please enter mobile number.</span>
  33. <span ng-show="sampleForm.mobile.$error.minlength || sampleForm.mobile.$error.maxlength">phone number should be 10 digits.</span>
  34. </p>
  35. <p>
  36. <input type="button" text="Reset" value="Reset" ng-click="reset()"></input>
  37. <input type="submit" class="btn btn-primary" ng-click="checkData()"
  38. ng-disabled="sampleForm.user.$dirty && sampleForm.user.$invalid || sampleForm.email.$dirty && sampleForm.email.$invalid || sampleForm.mobile.$dirty && sampleForm.mobile.$invalid || sampleForm.$invalid">
  39. </p>
  40. </div>
  41. </form>
  42. </body>
  43. </html>
Paste the code given below in script.js
  1. function validationCtrl($scope) {
  2. $scope.reset = function(){
  3. $scope.username = "";
  4. $scope.email = "";
  5. $scope.mobile = "";
  6. }
  7. $scope.isFormValid = function() {
  8. alert('form valid?: ', $scope.formValid);
  9. if (isFormValid)
  10. { alert("all data are valid."); }
  11. else
  12. { alert("all data are not valid."); }
  13. }
  14. }
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. }
  7. body{
  8. padding: 10px;
  9. }
  10. label {
  11. font-weight: bold;
  12. display: block;
  13. width: 150px;
  14. float: left;
  15. }
Open the index page in the Browser.
Please refer to the links given below for more details
Ebook Download
View all
Learn
View all