angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
index.html
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="formvalidation">
<head>
<meta charset="utf-8">
<title>AngularJS Form Validation</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style type="text/css">
.errortext{
color:red;
}
</style>
</head>
<body ng-controller="cntform">
<h1 class="page-header text-center">AngularJS Form Validation</h1>
<div class="signup-form">
<form role="form" name="myForm" novalidate>
<h2>Register</h2>
<p class="hint-text">Create your account. It's free and only takes a minute.</p>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" ng-minlength="10" ng-maxlength="30" ng-pattern="/^[a-zA-Z0-9_]*$/" ng-model="user.username" required autofocus>
<div class="errortext" ng-show="myForm.username.$dirty && myForm.username.$invalid">
<span ng-show="myForm.username.$error.required">Username is required</span>
<span ng-show="myForm.username.$error.minlength">Username must contain atleast 10 characters</span>
<span ng-show="myForm.username.$error.maxlength">Username should not be greater than 30 characters</span>
<span ng-show="myForm.username.$error.pattern && !myForm.username.$error.minlength && !myForm.username.$error.maxlength">Only letters, numbers and underscore allowed</span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" name="firstname" placeholder="Firstname" ng-model="user.firstname" required>
<div class="errortext" ng-show="myForm.firstname.$dirty && myForm.firstname.$invalid">
<span ng-show="myForm.firstname.$error.required">Firstname is required</span>
</div>
</div>
<div class="col-xs-6">
<input type="text" class="form-control" name="lastname" placeholder="Lastname" ng-model="user.lastname" required>
<div class="errortext" ng-show="myForm.lastname.$dirty && myForm.lastname.$invalid">
<span ng-show="myForm.lastname.$error.required">Lastname is required</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email" ng-model="user.email" required>
<div class="errortext" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required</span>
<span ng-show="myForm.email.$error.email">Invalid email format</span>
</div>
</div>
<div class="form-group">
<input type="url" class="form-control" name="url" placeholder="Website" ng-model="user.website" required>
<div class="errortext" ng-show="myForm.url.$dirty && myForm.url.$invalid">
<span ng-show="myForm.url.$error.required">Website is required</span>
<span ng-show="myForm.url.$error.url">Input a valid website</span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" ng-model="user.password" required>
<div class="errortext" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.password.$error.required">Password is required</span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" name="repassword" placeholder="Re-type Password" ng-model="user.repassword" required>
<div class="errortext" ng-show="myForm.repassword.$dirty && myForm.repassword.$invalid || myForm.repassword.$dirty && user.repassword != user.password">
<span ng-show="myForm.repassword.$error.required">Re-type password is required</span>
<span ng-show="!myForm.repassword.$error.required && user.repassword != user.password">Password did not match</span>
</div>
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a></label>
</div>
<div class="form-group">
<button type="button" class="btn btn-success btn-lg btn-block" ng-disabled="myForm.$invalid || user.repassword != user.password" ng-click="submit()"><span class="glyphicon glyphicon-check"></span> Register Now</button>
</div>
<div class="alert alert-success text-center" ng-show="valid">
<button type="button" class="close" ng-click="close()"><span aria-hidden="true">×</span></button>
<span class="glyphicon glyphicon-check"></span> Form Validated
</div>
</form>
<div class="text-center">Already have an account? <a href="#">Sign in</a></div>
</div>
<script>
var app = angular.module('formvalidation', []);
app.controller('cntform', function($scope){
$scope.valid = false;
$scope.submit = function(){
$scope.valid = true;
}
$scope.close = function(){
$scope.valid = false;
}
});
</script>
<style>
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control{
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus{
border-color: #5cb85c;
}
.form-control, .btn{
border-radius: 3px;
}
.signup-form{
width: 400px;
margin: 0 auto;
padding: 30px 0;
}
.signup-form h2{
color: #636363;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before, .signup-form h2:after{
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before{
left: 0;
}
.signup-form h2:after{
right: 0;
}
.signup-form .hint-text{
color: #999;
margin-bottom: 30px;
text-align: center;
}
.signup-form form{
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group{
margin-bottom: 20px;
}
.signup-form input[type="checkbox"]{
margin-top: 3px;
}
.signup-form .btn{
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child{
padding-right: 10px;
}
.signup-form .row div:last-child{
padding-left: 10px;
}
.signup-form a{
color: #fff;
text-decoration: underline;
}
.signup-form a:hover{
text-decoration: none;
}
.signup-form form a{
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover{
text-decoration: underline;
}
</style>
</body>
</html>
