<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mystyle.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script>
var app = angular.module('formApp', []);
app.controller('formCtrl', function($scope) {
$scope.sendForm = function() {
alert('Form Is submited');
};
$scope.getClass = function(color) {
return color.toString();
}
});
</script>
</head>
<body ng-app="formApp" ng-controller="formCtrl">
<h3>Form validation demo app in AngularJs</h3>
<form name="personForm" ng-submit="sendForm()">
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" ng-model="person.name" required/>
<span class="error" ng-show="personForm.name.$error.required">Required!</span>
</div>
<div class="space"></div>
<div>
<label for="adress">Adress</label>
<input id="address" name="address" type="text" ng-model="person.address" required/>
<span class="error" ng-show="personForm.address.$error.required">Required!</span>
</div>
<div class="space"></div>
<div>
<label for="contact">Contact No</label>
<input id="mobile" name="mobile" type="number" ng-model="person.mobile" required/>
<span class="error" ng-show="personForm.mobile.$error.required">Required with number!</span>
<span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span>
</div>
<div class="space"></div>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" ng-model="person.email" required/>
<span class="error" ng-show="personForm.email.$error.required">Required!</span>
<span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>
</div>
<div class="space"></div>
<div>
<input type="checkbox" ng-model="terms" name="terms" id="terms" required/>
<label for="terms">I Agree to the terms.</label>
<span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span>
</div>
<div class="space"></div>
<div>
<button type="submit">Submit Form</button>
</div>
</form>
</body>
</html>
/* Put your css in here */
.invalid.true {
background: gray;
}
.valid.false {
background: red;
}
.valid.true {
background: green;
}
.error {
color: red;
}
.space{
padding-top:10px;
}
input[type=text] {
height: 25px;
position: relative;
left: 0;
outline: none;
border: 1px solid #ccc;
border-color: rgba(0,0,0,.30);
background-color: white;
font-size: 16px;
}
input[type=email] {
height: 25px;
position: relative;
left: 0;
outline: none;
border: 1px solid #ccc;
border-color: rgba(0,0,0,.30);
background-color: white;
font-size: 16px;
}
input[type=number] {
height: 25px;
border: 1px solid #ccc;
border-color: rgba(0,0,0,.30);
background-color: white;
}