hi let see how to do validate a html form using angularjs
example :
<!DOCTYPE html>
<html>
<html>
<head>
<script src=”https://code.angularjs.org/1.2.9/angular.js”></script>
<script>
function EmpForm($scope) {
$scope.empname = ‘Chandan Singh';
$scope.empemail = ‘chandan.may2@gmail.com';
}
</script>
<script src=”https://code.angularjs.org/1.2.9/angular.js”></script>
<script>
function EmpForm($scope) {
$scope.empname = ‘Chandan Singh';
$scope.empemail = ‘chandan.may2@gmail.com';
}
</script>
</head>
<body>
<form ng-app=”” ng-controller=”EmpForm” name=”EmpFormPage” novalidate>
Emp name:
<input type=”text” name=”empname” ng-model=”empname” required>
<span ng-show=”EmpFormPage.empname.$error.required”>Please Enter Emp Name</span>
<input type=”text” name=”empname” ng-model=”empname” required>
<span ng-show=”EmpFormPage.empname.$error.required”>Please Enter Emp Name</span>
<br>
<br>
<br>
Email:
<input type=”email” name=”empemail” ng-model=”empemail” required>
<span ng-show=”EmpFormPage.empemail.$error.required”>Please Enter Email Address</span>
<span ng-show=”EmpFormPage.empemail.$error.email”>Invalid Email Address</span>
<input type=”email” name=”empemail” ng-model=”empemail” required>
<span ng-show=”EmpFormPage.empemail.$error.required”>Please Enter Email Address</span>
<span ng-show=”EmpFormPage.empemail.$error.email”>Invalid Email Address</span>
<p>
<input type=”submit” ng-disabled=”EmpFormPage.empname.$invalid || EmpFormPage.empemail.$invalid”>
</p>
<input type=”submit” ng-disabled=”EmpFormPage.empname.$invalid || EmpFormPage.empemail.$invalid”>
</p>
</form>
</body>
</html>
</html>
- ng-show directive show and hides the error messages as per the expression provided into it.
- ng-disabled directive will disable the submit button till all the fields are validated properly
Output:
No comments:
Post a Comment