AngularJS Form Validation

AngularJS Form Validation

In this Post We Will Explain About is AngularJS Form Validation With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to angularjs form validation on submitExample

In this post we will show you Best way to implement AngularJS Form Validation With ngMessages, hear for Easy Form Validation in AngularJS with ngMessageswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




AngularJS provides simple client-side HTMLform validation. It checks the some state of the HTML form and DOM input fields ( Like as a input, textarea box, select box), and lets We notify the all the user about the current state means errors.

Also Read :   PHP Stripe API ACH Payments using stripe.js

It also holds the some information about whether the HTML input fields have been some touched, or all the data modified, or not.

There are the Following directives are used to track some errors in an AngularJS HTML form:

1> $dirty – angular states that some value has been changed.
2> $invalid – angular states that some value entered is invalid.
3> $error – angular states the some exact error.

Code : AngularJS Form Validation Example

index.html

<!DOCTYPE html>  
 <html>  
   <head>  
      <title>Step By step Angular JS Forms</title>  
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
        
 <style>  
	//Devloped By Live24u.com
         table, th , td {  
            border: 1px solid grey;  
            border-collapse: collapse;  
            padding: 5px;  
         }  
     //Devloped By Live24u.com      
         table tr:nth-child(odd) {  
            background-color: lightpink;  
         }  
      //Devloped By Live24u.com     
         table tr:nth-child(even) {  
            background-color: lightyellow;  
         }  
      </style>  
        
   </head>  
   <body>  
        
      <h2>Live AngularJS Sample Application</h2>  
      <div ng-app = "liveApp" ng-controller = "EmpCtrl">  
           
         <form name = "empForm" novalidate>  
            <table border = "0">  
               <tr>  
                  <td>Enter first name:</td>  
                  <td><input name = "fname" type = "text" ng-model = "fname" required>  
                     <span style = "color:red" ng-show = "empForm.fname.$dirty && empForm.fname.$invalid">  
                        <span ng-show = "empForm.fname.$error.required">Your First Name is required.</span>  
                     </span>  
                  </td>  
               </tr>  
                 
               <tr>  
                  <td>Enter last name: </td>  
                  <td><input name = "lname"  type = "text" ng-model = "lname" required>  
                     <span style = "color:red" ng-show = "empForm.lname.$dirty && empForm.lname.$invalid">  
                        <span ng-show = "empForm.lname.$error.required">Your Last Name is required.</span>  
                     </span>  
                  </td>  
               </tr>  
                 
               <tr>  
                  <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>  
                     <span style = "color:red" ng-show = "empForm.email.$dirty && empForm.email.$invalid">  
                        <span ng-show = "empForm.email.$error.required">Your Email is required.</span>  
                        <span ng-show = "empForm.email.$error.email">Your Invalid email address.</span>  
                     </span>  
                  </td>  
               </tr>  
                <tr>  
                  <td>  
                     <button ng-click = "dataReset()">Reset</button>  
                  </td>  
                  <td>  
                     <button ng-disabled = "empForm.fname.$dirty &&  
                        empForm.fname.$invalid || empForm.lname.$dirty &&  
                        empForm.lname.$invalid || empForm.email.$dirty &&  
                        empForm.email.$invalid" ng-click="submit()">Submit</button>  
                  </td>  
               </tr>  
     </table>  
         </form>  
      </div>  
        <script>  
         var liveApp = angular.module("liveApp", []);  
         liveApp.controller('EmpCtrl', function($scope) {  
            $scope.dataReset = function(){  
               $scope.fname = "DSP";  
               $scope.lname = "Patel";  
               $scope.email = "admin@live24u.com";  
            }  
             $scope.dataReset();  
         });  
      </script>  
     </body>  
</html>  




Also Read :   Php Nested Loops - while foreach do-while continue break statement

Example

I hope you have Got What is AngularJS Form Validation And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.