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>
