<!DOCTYPE html>
<html
ng-app="myApp">
<head>
<title></title>
<script src="angular.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<style>
.form-validation .form-control.has-focus + .help-block {
display: none;
}
.form-validation .form-control.has-visited:not(.has-focus) + .help-block {
display: block;
}
.form-validation .form-control.ng-dirty.ng-invalid, .form-validation .form-control.ng-dirty.ng-invalid[type="checkbox"] + i {
border-color: #ff7b76;
}
.form-validation .form-control.ng-dirty.ng-invalid + .help-block, .form-validation .form-control.ng-dirty.ng-invalid[type="checkbox"] + i + .help-block {
color: #ff635c;
}
.form-validation .form-control.ng-dirty.ng-valid {
border-color: #b2e600;
}
.form-validation .form-control.ng-dirty.ng-valid + .help-block {
color: #aadc00;
}
.has-error .form-control,
.has-error .form-control:focus {
box-shadow: none;
border-color: #ff7b76;
}
.has-error .form-control.has-focus,
.has-error .form-control:focus.has-focus {
border-color: #22beef;
}
.has-error .form-control.has-visited:not(.has-focus),
.has-error .form-control:focus.has-visited:not(.has-focus) {
border-color: #ff7b76;
}
.has-error .control-label,
.has-error .help-block {
color:
#ff635c;
}
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
color:
#616f77;
}
.has-error .checkbox-custom > i,
.has-error .checkbox-custom:hover > i {
border-color: #ff7b76;
}
.has-success .form-control,
.has-success .form-control:focus {
box-shadow: none;
border-color: #b2e600;
}
.has-success .form-control.has-focus,
.has-success .form-control:focus.has-focus {
border-color: #22beef;
}
.has-success .form-control.has-visited:not(.has-focus),
.has-success .form-control:focus.has-visited:not(.has-focus) {
border-color: #b2e600;
}
.has-success .control-label,
.has-success .help-block {
color:
#aadc00;
}
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
color:
#616f77;
}
.has-success .checkbox-custom > i {
border-color: #b2e600;
}
.has-warning .form-control,
.has-warning .form-control:focus {
box-shadow: none;
border-color: #ffcd33;
}
.has-warning .form-control.has-focus,
.has-warning .form-control:focus.has-focus {
border-color: #22beef;
}
.has-warning .form-control.has-visited:not(.has-focus),
.has-warning .form-control:focus.has-visited:not(.has-focus) {
border-color: #ffcd33;
}
.has-warning .control-label,
.has-warning .help-block {
color:
#ffc71a;
}
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
color: #616f77;
}
.has-warning .checkbox-custom > i {
border-color: #ffcd33;
}
</style>
<script>
var app = angular.module('myApp', [])
.controller('myController',
function () {
})
</script>
<meta charset="utf-8" />
</head>
<body
class="jumbotron" ng-controller="myController">
<form name="frm">
<div class="row col-lg-offset-4
col-lg-6 form-validation">
<div class="row">
<label
class="col-lg-3">Enter Name</label>
<div
class="col-lg-4">
<input type="text" class="form-control" ng-model="name" required />
</div>
</div>
<div class="row" style="margin-top:10px">
<label
class="col-lg-3">Gender</label>
<div
class="col-lg-4">
<select class="form-control" ng-model="gender" required>
<option value="">--Select--</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
</div>
<div class="row" style="margin-top:10px" required>
<label
class="col-lg-3">Enter MobileNo</label>
<div
class="col-lg-4">
<input type="text" class="form-control" maxlength="10" name="mobileno" ng-pattern="/^[7-9]{1}[0-9]{9}/" ng-model="mobileno" required/>
</div>
</div>
<div class="row" style="margin-top:10px">
<label
class="col-lg-3">Enter PAN</label>
<div
class="col-lg-4">
<input type="text" ng-model="pan" name="pan" ng-pattern="/^[\w]{3}(p|P|c|C|h|H|f|F|a|A|t|T|b|B|l|L|j|J|g|G)[\w][\d]{4}[\w]$/" class="form-control" required />
</div>
</div>
<div class="row" style="margin-top:10px">
<label
class="col-lg-3">Enter Email</label>
<div
class="col-lg-4">
<input type="email" name="email" ng-pattern="/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/" ng-model="email" class="form-control" required />
</div>
</div>
<div class="row" style="margin-top:10px" align="center">
<div
class="col-lg-4">
<input type="button" class="btn btn-success" ng-disabled="frm.$invalid" value="Save"/>
</div>
</div>
<div class="row col-lg-8" style="margin-top:10px" align="center">
<div
class="alert
alert-danger"
ng-show="frm.mobileno.$error.pattern">
<strong>Enter Valid Mobileno</strong>
</div>
<div
class="alert
alert-danger"
ng-show="frm.email.$error.pattern">
<strong>Enter Valid EmailID</strong>
</div>
<div
class="alert
alert-danger"
ng-show="frm.pan.$error.pattern">
<strong>Enter Valid PAN</strong>
</div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment