Simple AngularJS Form Validation Example

Simple AngularJS Form Validation Example

In this Post We Will Explain About is Simple AngularJS Form Validation Example With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular Reactive Forms: trigger validation on submit Example

In this post we will show you Best way to implement Validating User Input on a Form in Angular JS, hear for AngularJS Form Validation With ngMessages with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Angular Simple Form and Input State

It simple the All the states in Angular JS.

1.$untouched A Html Tag has not been touched set yet
2.$touched A Html Tag has been checked touched
3.$pristine A Html Tag has not been modified yet
4.$dirty A Html Tag has been modified
5.$invalid A Html Tag content is not valid check
6.$valid A Html Tag content is valid cehck

angular Validation Rules used in this post

1.email – A HTML input know in email format
2.url – A HTML input know be a url
3.required – A HTML fields Html Tag know not be empty
4.ng-minlength – HTML Input must be greater conditions than or equal to the settle value
5.ng-maxlength – Input must be less than or equal to the settle value
6.ng-pattern – A fields know look like the settle pattern (in this case of this post, the fields know follow to settle special REGEX format)

Also Read :   AngularJS Form Validation - Angular Validation Example

index.html

It is simple main file index.html that Data contains simple HTML form and Angularjs validations.

<!DOCTYPE html>
<html lang="en" ng-app="formvalidApp">
<head>
    <meta charset="utf-8">
    <title>Simple AngularJS Form Validation Example</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">Simple AngularJS Form Validation</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="main.js"></script>
</body>
</html>

main.js

It contains simple main.js scripts.

Also Read :   AngularJS Form Validation

var formvalidApp = angular.module('formvalidApp', []);
formvalidApp.controller('uservalCtrl', function($scope){
	$scope.valid = false;
	$scope.submit = function(){
		$scope.valid = true; //boolean true or false
	}
	$scope.close = function(){
		//check here false
		$scope.valid = false;
	}
});

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Form validation with AngularJS And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.