<!DOCTYPE html>
<html>
<head>
<title>AngularJS Form Validations</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<style type="text/css">
table, th , td {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
border: 1px solid #0099da;
border-collapse: collapse;
padding: 7px 20px 7px 7px;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table tr:nth-child(even) {
background-color: #F69F9F9;
}
.custom_form{ height:20px; width:100%; border-radius:2px; padding:3px 5px;}
.custom_btn{ background:#0099da; padding:6px 15px; border-radius:2px; color:#FFF;}
.custom_btn:hover{ background:#069;}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="webDetails">
<form name="websiteDetails" novalidate>
<table border="0">
<tr>
<td>Enter website name</td>
<td><input name="websiteName" type="text" ng-model="websiteName" class="custom_form" required>
<span style = "color:red" ng-show = "websiteDetails.websiteName.$dirty && websiteDetails.websiteName.$invalid">
<span ng-show = "websiteDetails.websiteName.$error.required">First Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Enter website URL</td>
<td><input name="websiteURL" type="text" ng-model="websiteURL" class="custom_form" required>
<span style="color:red" ng-show="websiteDetails.websiteURL.$dirty && websiteDetails.websiteURL.$invalid">
<span ng-show = "websiteDetails.websiteURL.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Enter Email ID</td><td><input name="email" type="email" ng-model="email" length="150" class="custom_form" required>
<span style = "color:red" ng-show = "websiteDetails.email.$dirty && websiteDetails.email.$invalid">
<span ng-show = "websiteDetails.email.$error.required">Email is required.</span>
<span ng-show = "websiteDetails.email.$error.email">Invalid email address.</span>
</span>
</td>
</tr>
<tr>
<td> </td>
<td>
<button ng-disabled="websiteDetails.websiteName.$dirty &&
websiteDetails.websiteName.$invalid || websiteDetails.websiteURL.$dirty &&
websiteDetails.websiteURL.$invalid || websiteDetails.email.$dirty &&
websiteDetails.email.$invalid" ng-click="submit()" class="custom_btn">Submit</button>
<button ng-click="reset()" class="custom_btn">Reset</button>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var mainApp = angular.module("mainApp", []);
mainApp.controller('webDetails', function($scope) {
$scope.reset = function(){
$scope.websiteName="Free Time Learn";
$scope.websiteURL="www.freetimelearning.com";
$scope.email="info@freetimelearning.com";
}
$scope.reset();
});
</script>
</body>
</html>