var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.LoginValidator = function ($event) {
$event.preventDefault();
if($scope.LoginForm.$valid){
console.log("valid");
}else{
console.log("invalid");
console.log($scope.LoginForm.$error.require);
if($scope.LoginForm.Email.$invalid){
$scope.mailRequire = true;
}
if($scope.LoginForm.password.$invalid){
$scope.passRequire = true;
}
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<form id="login-form" name="LoginForm" action="/home" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator($event)">
{{LoginForm.$submitted | json}}
<input type="email" name="Email" id="email" tabindex="1" ng-model="login.email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" placeholder="Email" ng-required="true">
<span style="color:red; display:block; text-align:center;" ng-show="LoginForm.Email.$dirty && LoginForm.Email.$error.pattern">* Please Enter Valid Email</span>
<span style="color:red; display:block; text-align:center;" ng-show="mailRequire">* Email required</span>
<input type="password" name="password" ng-minlength="8" id="password" tabindex="2" ng-model="login.password" placeholder="Password" ng-required="true">
<div ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid"><small style="color:red; display:block; text-align:center;">* Invalid Password</small></div>
<input type="submit" value="LOG IN" />
</form>
</body>
</html>
/* Put your css in here */