AngularJS Form - Validation (Email and number) Example

AngularJS Form - Validation Example

Create an HTML file - index.html.
Create a JS file - script.js.
Create a CSS file - style.css.

Paste the code given below in index.html.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<h3>AngularJS Form - Validation Example</h3>
<form ng-app="" ng-controller="validationCtrl" name="sampleForm" novalidate>
<div class="form-group">
<p>
<label class="control-label">Full Name:</label>
<input type="text" ng-minlength="5" class="form-control" name="username" ng-model="username" placeholder="Ex - John DD" required >
<span style="color:red" ng-show="sampleForm.username.$dirty && sampleForm.username.$invalid">
<span ng-show="sampleForm.username.$error.required">Please enter your name.</span>
<span ng-show="sampleForm.username.$error.minlength">Please enter full name.</span>
</span>
</p>
<p>
<label class="control-label">Email Address:</label>
<input type="email" class="form-control" name="email" ng-model="email" placeholder="Ex - [email protected]" required>
<span style="color:red" ng-show="sampleForm.email.$dirty && sampleForm.email.$invalid" />
<span ng-show="sampleForm.email.$error.required">Please enter email address.</span>
<span ng-show="sampleForm.email.$error.email">Please enter valid email address.</span>
</p>
<p>
<label class="control-label">Mobile Number:</label>
<input ng-minlength="10" ng-maxlength="10" type="number" class="form-control" name="mobile" ng-model="mobile" placeholder="Ex - 1234567890" required>
<span style="color:red" ng-show="sampleForm.mobile.$dirty && sampleForm.mobile.$invalid"/>
<span ng-show="sampleForm.mobile.$error.required">Please enter mobile number.</span>
<span ng-show="sampleForm.mobile.$error.minlength || sampleForm.mobile.$error.maxlength">phone number should be 10 digits.</span>
</p>
<p>
<input type="button" text="Reset" value="Reset" ng-click="reset()"></input>
<input type="submit" class="btn btn-primary" ng-click="checkData()"
ng-disabled="sampleForm.user.$dirty && sampleForm.user.$invalid || sampleForm.email.$dirty && sampleForm.email.$invalid || sampleForm.mobile.$dirty && sampleForm.mobile.$invalid || sampleForm.$invalid">
</p>
</div>
</form>
</body>
</html>

Paste the code given below in script.js

function validationCtrl($scope) {
$scope.reset = function(){
$scope.username = "";
$scope.email = "";
$scope.mobile = "";
}
$scope.isFormValid = function() {
alert('form valid?: ', $scope.formValid);
if (isFormValid)
{ alert("all data are valid."); }
else
{ alert("all data are not valid."); }
}
}

Paste the code given below in style.css

.ng-invalid.ng-dirty{
border-color: #FA787E;
}
.ng-valid.ng-dirty{
border-color: #78FA89;
}
body{
padding: 10px;
}
label {
font-weight: bold;
display: block;
width: 150px;
float: left;
}

Open the index page in the Browser.