Angular JS Form Validation Example Code

January 13, 2018 | Category : Angular Bootstrap

this tutorial, i would like to show you how to set simple angularjs from validation example with source code. you can simple use form validation rules like email, required, url, ng-minlength, ng-maxlength, ng-pattern etc and input state like $untouched, $touched, $pristine, $dirty, $invalid, $valid etc.

As we know validation is very important part of any application. here i will show you validation on keypress event so when you focus on text box it will show you error message if you enter wrong. here is very simple and easy form validation example using angular js.

Just create two files as like listed bellow and you will get simple example of angular js form validation code.

Create index.php file:

<!DOCTYPE html>

<html lang="en" ng-app="formvalidApp">


<head>

<meta charset="utf-8">

<title>Angular JS Form Validation Example Code</title>

<!-- bootstrap.min.css -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- angular.min.js -->

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<style type="text/css">

.errortext{

color:red;

}

</style>

</head>


<body ng-controller="uservalCtrl">

<div class="pakainfo container">


<h1 class="page-header">Angular JS Form Validation Example Code</h1>


<div class="pakainfo col-md-6 col-md-offset-3">

<div class="login-panel panel panel-success">

<div class="panel-heading">

<h3 class="panel-title"> Validation Form</h3>

</div>

<div class="panel-body">

<form role="form" name="studentForm" novalidate>

<fieldset>


<div class="lst form-group">

<input type="text" class="studfld form-control" name="studfname" placeholder="StudentName" ng-minlength="10" ng-maxlength="30" ng-pattern="/^[a-zA-Z0-9_]*$/" ng-model="student.studfname" required autofocus>

<div class="errortext" ng-show="studentForm.studfname.$dirty && studentForm.studfname.$invalid">

<span ng-show="studentForm.studfname.$error.required">StudentName is required</span>

<span ng-show="studentForm.studfname.$error.minlength">StudentName must contain atleast 10 characters</span>

<span ng-show="studentForm.studfname.$error.maxlength">StudentName know not be greater than 30 characters</span>

<span ng-show="studentForm.studfname.$error.pattern && !studentForm.studfname.$error.minlength && !studentForm.studfname.$error.maxlength">Only letters, numbers and underscore allowed</span>

</div>

</div>


<div class="lst form-group">

<input type="password" class="studfld form-control" name="password" placeholder="Password" ng-model="student.password" required>

<div class="errortext" ng-show="studentForm.password.$dirty && studentForm.password.$invalid">

<span ng-show="studentForm.password.$error.required">Password is required</span>

</div>

</div>


<div class="lst form-group">

<input type="password" class="studfld form-control" name="studrespass" placeholder="Student Re-type Password" ng-model="student.studrespass" required>

<div class="errortext" ng-show="studentForm.studrespass.$dirty && studentForm.studrespass.$invalid || studentForm.studrespass.$dirty && student.studrespass != student.password">

<span ng-show="studentForm.studrespass.$error.required">Re-type password is required</span>

<span ng-show="!studentForm.studrespass.$error.required && student.studrespass != student.password">Password did not match</span>

</div>

</div>


<div class="lst form-group">

<input type="email" class="studfld form-control" name="email" placeholder="Student Email" ng-model="student.email" required>

<div class="errortext" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">

<span ng-show="studentForm.email.$error.required">Student Email is required</span>

<span ng-show="studentForm.email.$error.email">Invalid email format</span>

</div>

</div>


<div class="lst form-group">

<input type="url" class="studfld form-control" name="url" placeholder="Student Website" ng-model="student.website" required>

<div class="errortext" ng-show="studentForm.url.$dirty && studentForm.url.$invalid">

<span ng-show="studentForm.url.$error.required">Student Website is required</span>

<span ng-show="studentForm.url.$error.url">Input a valid Student website</span>

</div>

</div>


<div class="lst form-group">

<input type="text" class="studfld form-control" name="firstname" placeholder="Student Firstname" ng-model="student.firstname" required>

<div class="errortext" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">

<span ng-show="studentForm.firstname.$error.required">Firstname is required</span>

</div>

</div>


<div class="lst form-group">

<input type="text" class="studfld form-control" name="studlname" placeholder="Student Lastname" ng-model="student.studlname" required>

<div class="errortext" ng-show="studentForm.studlname.$dirty && studentForm.studlname.$invalid">

<span ng-show="studentForm.studlname.$error.required">Student Lastname is required</span>

</div>

</div>


<button type="button" class="btn btn-lg btn-success btn-block" ng-disabled="studentForm.$invalid || student.studrespass != student.password" ng-click="submit()"><span class="live glyphicon glyphicon-check"></span> Validate</button>

</fieldset>

</form>

</div>

</div>


<div class="alert alert-success" ng-show="valid">

<button type="button" class="live close" ng-click="close()"><span aria-hidden="true">×</span></button>

<span class="live glyphicon glyphicon-check"></span>Check Form Validated

</div>


</div>

</div>


<script src="app.js"></script>

</body>

</html>

app.js file:

var formvalidApp = angular.module('formvalidApp', []);


formvalidApp.controller('uservalCtrl', function($scope){

$scope.valid = false;


$scope.submit = function(){

$scope.valid = true;

}


$scope.close = function(){

$scope.valid = false;

}

});

You can copy of both files.

I hope you found best solution :)