AngularJS Form - Validation Example
- Create an HTML file - index.html.
- Create a JS file - script.js.
- Create a CSS file - style.css.
Paste the code given below in index.html.
- <!DOCTYPE html>
- <html>
- <head>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
- <script src="script.js"></script>
- <link rel="stylesheet" href="style.css" >
- </head>
-
- <body>
- <h3>AngularJS Form - Validation Example</h3>
-
- <form ng-app="" ng-controller="validationCtrl" name="sampleForm" novalidate>
- <div class="form-group">
- <p>
- <label class="control-label">Full Name:</label>
- <input type="text" ng-minlength="5" class="form-control" name="username" ng-model="username" placeholder="Ex - John DD" required >
- <span style="color:red" ng-show="sampleForm.username.$dirty && sampleForm.username.$invalid">
- <span ng-show="sampleForm.username.$error.required">Please enter your name.</span>
- <span ng-show="sampleForm.username.$error.minlength">Please enter full name.</span>
- </span>
- </p>
- <p>
- <label class="control-label">Email Address:</label>
- <input type="email" class="form-control" name="email" ng-model="email" placeholder="Ex - [email protected]" required>
- <span style="color:red" ng-show="sampleForm.email.$dirty && sampleForm.email.$invalid" />
- <span ng-show="sampleForm.email.$error.required">Please enter email address.</span>
- <span ng-show="sampleForm.email.$error.email">Please enter valid email address.</span>
- </p>
- <p>
- <label class="control-label">Mobile Number:</label>
- <input ng-minlength="10" ng-maxlength="10" type="number" class="form-control" name="mobile" ng-model="mobile" placeholder="Ex - 1234567890" required>
- <span style="color:red" ng-show="sampleForm.mobile.$dirty && sampleForm.mobile.$invalid"/>
- <span ng-show="sampleForm.mobile.$error.required">Please enter mobile number.</span>
- <span ng-show="sampleForm.mobile.$error.minlength || sampleForm.mobile.$error.maxlength">phone number should be 10 digits.</span>
-
- </p>
- <p>
- <input type="button" text="Reset" value="Reset" ng-click="reset()"></input>
- <input type="submit" class="btn btn-primary" ng-click="checkData()"
- ng-disabled="sampleForm.user.$dirty && sampleForm.user.$invalid || sampleForm.email.$dirty && sampleForm.email.$invalid || sampleForm.mobile.$dirty && sampleForm.mobile.$invalid || sampleForm.$invalid">
- </p>
- </div>
- </form>
-
- </body>
- </html>
Paste the code given below in script.js
- function validationCtrl($scope) {
-
-
- $scope.reset = function(){
- $scope.username = "";
- $scope.email = "";
- $scope.mobile = "";
- }
-
- $scope.isFormValid = function() {
- alert('form valid?: ', $scope.formValid);
-
- if (isFormValid)
- { alert("all data are valid."); }
- else
- { alert("all data are not valid."); }
-
- }
- }
Paste the code given below in style.css
- .ng-invalid.ng-dirty{
- border-color: #FA787E;
- }
- .ng-valid.ng-dirty{
- border-color: #78FA89;
- }
-
- body{
- padding: 10px;
- }
-
- label {
- font-weight: bold;
- display: block;
- width: 150px;
- float: left;
- }
Open the index page in the Browser.
Please refer to the links given below for more details