How to validate an angular form after submit?
Question
I need to design a form using angularjs. I need to use two kind of validation,
When a user fills the form , I need to validate that field on fly.This is by default.
I do not want to disable the submit button. Lets say if a user comes to the page and directly clicks on the submit button, then also I want to show all the error on different fields.How this can be done . I have tried using $setValidity() But not successful.How this can be done.
This is the form.
var sampleApp = angular.module("sampleApp", []); sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { $scope.userData = { fname: "", lname: "" }; $scope.submitted = false; $scope.submitForm = function(registrationForm) { $scope.registrationForm.fname.$dirty = true; $scope.registrationForm.lname.$dirty = true; if (registrationForm.$invalid) { alert("form validation error."); return; } else { alert("form submitted successfully."); } } } ]);
input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; } input.ng-pristine { border-color: #FFFF00; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> <script src="script.js"></script> <html ng-app="sampleApp"> <body ng-controller="sampleCtrl"> <form name="registrationForm" ng-submit="submitForm(registrationForm)" novalidate> FirstName* <br> <input type="text" name="fname" ng-model="userData.fname" required> <span ng-show="registrationForm.fname.$dirty && registrationForm.fname.$error.required"> First name is required. </span> <br>LastName* <br> <input type="text" name="lname" ng-model="userData.lname" required> <span ng-show="registrationForm.lname.$dirty && registrationForm.lname.$error.required"> Last name is required. </span> <br> <br> <input type="submit" value="Submit"> </form> </body> </html>
1 answers
solution1
1 2014-11-30 17:01:42
An easy way to make your form validations show up upon form submission, you can just set the $scope.registrationForm.lname.$dirty = true; and $scope.registrationForm.fname.$dirty = true; in your $scope.submitForm function.
Solution:
var sampleApp = angular.module("sampleApp", []); sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { $scope.userData = { fname: "", lname: "" }; $scope.submitted = false; $scope.submitForm = function(registrationForm) { if (registrationForm.$invalid) { alert("form validation error."); $scope.registrationForm.lname.$dirty = true; $scope.registrationForm.fname.$dirty = true; return; } else { alert("form submitted successfully."); } } } ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> <script src="script.js"></script> <html ng-app="sampleApp"> <body ng-controller="sampleCtrl"> <form name="registrationForm" ng-submit="submitForm(registrationForm)" novalidate> FirstName* <br> <input type="text" name="fname" ng-model="userData.fname" required> <span ng-show="registrationForm.fname.$dirty && registrationForm.fname.$error.required">First name is required.</span> <br>LastName* <br> <input type="text" name="lname" ng-model="userData.lname" required> <span ng-show="registrationForm.lname.$dirty && registrationForm.lname.$error.required">Last name is required.</span> <br> <br> <input type="submit" value="Submit"> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.