Hello readers, In this tutorial, we are going to see Form Validation using Angular JS. Almost every website uses forms to perform different tasks like signing up users or obtaining their contact information. It is very important to make sure that a user who is filling out the form is at least entering valid information in the input fields.

Form Validation using Angular Js:

Create a HTML file and write the following code into it.

<html>
<head>
<title>
Validation Example Angular Js
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" />
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.OnValidate = function($event) {
$scope.submitted = true;

if ($scope.myForm.$valid) 
{
alert("Welcome");
}
}
});
</script>
<style type="text/css">
.error
{
color:red;
font-weight:bold;
}
</style>
<head>
<body>
<div class="container">
<br/>
<h1>
Angular Js Validation Example
</h1>
<br/>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation="">
<div class="form-group">
<label >First Name:</label>

<input type="text" id="txtFirstName" name="FirstName" ng-model="FirstName" class="form-control" required>
<span ng-show="submitted || myForm.FirstName.$dirty && myForm.FirstName.$invalid">
<span ng-show="myForm.FirstName.$error.required" class="error">First Name is required.</span>
 
</span>
 
</div>
<div class="form-group">
<label> Last Name:</label>
<input type="text" id="txtLastName" name="LastName" ng-model="LastName" required class="form-control">
<span ng-show="submitted || myForm.LastName.$dirty && myForm.LastName.$invalid">
<span ng-show="myForm.LastName.$error.required" class="error">Last Name is required.</span>
 
</span>
</div>
<div class="form-group">
<label> Email:</label>
<input type="email" class="form-control" name="Email" id="txtEmail" ng-model="Email" required>
<span ng-show="submitted || myForm.Email.$dirty && myForm.Email.$invalid">
<span ng-show="myForm.Email.$error.required" class="error">Email is required.</span>
<span ng-show="myForm.Email.$error.email" class="error">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<label> User Name:</label>
<input type="text" id="txtUserName" class="form-control" name="UserName" ng-model="UserName" ng-maxlength="12" required>
<span ng-show="submitted || myForm.UserName.$dirty && myForm.UserName.$invalid">
<span ng-show="myForm.UserName.$error.required" class="error">User Name is required.</span>

<span ng-show="myForm.UserName.$error.maxlength" class="error">User Name should contain 12 character.</span> 
</span>
</div>
<div class="form-group">
<label> Password:</label>
<input type="password" id="txtPassword" class="form-control" name="Password" ng-model="Password" ng-maxlength="10" ng-minlength="6" required>
<span ng-show="submitted || myForm.Password.$dirty && myForm.Password.$invalid">
<span ng-show="myForm.Password.$error.required" class="error">Password is required.</span>

<span ng-show="myForm.Password.$error.minlength" class="error">Password can not be less than 6 character</span> 
<span ng-show="myForm.Password.$error.maxlength" class="error">Password can not be greater than 10 character.</span> 
</span>
</div>

<p style="text-align:right">
<input type="button" ng-click="OnValidate()" class="btn btn-primary" value="Post">
</p>
</form>
</div>
</body>
</html>

Run the following in the browser.

Form Validation

See Demo

View More:

Conclusion:

I hope you enjoyed my this post about Form Validation using Angular JS. I will appreciate your feedback, comments, and suggestions.

Thank You.

29 Comments

  • Thanks so much for providing individuals with an extraordinarily brilliant chance to read from this web site. It’s usually very ideal and as well , jam-packed with a great time for me and my office co-workers to search your website more than thrice per week to find out the newest secrets you have got. And definitely, I’m just certainly fascinated concerning the beautiful tricks you give. Selected 4 areas in this posting are undoubtedly the most suitable we have had.

  • Good article and straight to the point. I don’t know if this is truly the best place to ask but do you people have any thoughts on where to get some professional writers? Thank you 🙂

  • Heya i’m for the first time here. I found this board and I find It truly useful & it helped me out a lot. I hope to give something back and help others like you aided me.|

  • Thanks so much for providing individuals with an extremely memorable chance to read in detail from this web site. It really is very kind and also stuffed with amusement for me personally and my office acquaintances to search your site at least three times a week to find out the latest tips you have got. Of course, I am just usually fascinated considering the amazing methods you give. Some 1 facts on this page are easily the best I have ever had.

  • Does your blog have a contact page? I’m having trouble locating it but, I’d like to send you an e-mail. I’ve got some ideas for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it improve over time.

  • I do believe all of the concepts you’ve offered in your post. They’re really convincing and can certainly work. Nonetheless, the posts are very short for starters. May just you please extend them a little from next time? Thanks for the post.

  • Hello There. I found your blog using msn. This is an extremely well written article. I will make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll certainly return.

  • You really make it appear really easy with your presentation but I in finding this topic to be really something which I feel I would by no means understand. It sort of feels too complicated and very wide for me. I’m having a look ahead on your next submit, I’ll attempt to get the grasp of it!

  • Heya i am for the first time here. I came across this board and I find It truly helpful & it helped me out much. I’m hoping to offer one thing again and help others like you helped me.

  • Very well written story. It will be supportive to anyone who employess it, including yours truly :). Keep doing what you are doing – looking forward to more posts.

  • 820963 542358I only wish that I had the ability to convey what I wanted to say within the manner that you have presented this data. Thanks. 262178

  • Looking forward to reading more. Great blog article.Thanks Again. Will read on…

  • Hello, you used to write wonderful, but the last few posts have been kinda boring… I miss your great writings. Past several posts are just a bit out of track! come on!

  • Really Appreciate this update, can I set it up so I receive an email sent to me whenever there is a fresh article?

  • I do agree with all of the ideas you have presented in your post. They are very convincing and will definitely work. Still, the posts are very short for starters. Could you please extend them a bit from next time? Thanks for the post.