Close

BLOGS

Quick guide on AngularJS Form Validation

Introduction

AngularJS is an open source script language. AngularJS comes with validation built in so now it's much easier to create validation that works across browsers has fast processing compared to other validations.

Form validation in AngularJS ensures that the input fields are validated at the browser ( also known as client-side or UI level). Angular Form can be validated using Angular provided Form states and input fields state or by using the HTML5 attributes. 

Angular provides properties on forms that help us validate them. They give us various information about a form or its inputs and are applied to a form and inputs. They provide information about the form or it’s input fields which is basically its current state.

There are some important methods which can be used for validation in Angular JS

  1. $dirty – It is used by the user to make some changes.
  2. $invalid – It is used to identify the value entered is invalid. 
  3. $error – It is used to exact the error.
  4. $Valid- These validations in the form currently evaluates to correct.

Lets start with Demo Project

Here we have a simple empty ASP.NET web application project created using Visual Studio with a blank HTML file added in it.

Then installed a Angular JS using Nuget package and add 3 html text fields in html file which will have Angular JS validationrule applied.

We created a a seperate CSS file which will have a CSS code to style the error in text boxes.

.designForm
{
     border: 10px solid lightblue;
     margin: 0px auto;
     background-color: Silver;    
     width: 30%;
     padding:20px;
     margin-top: 30px;
}

.layoutFields
{
    text-align: left;
}

.fname.ng-valid {    
background-color: lightgreen;    
}    
    
.fname.ng-dirty.ng-invalid-required {    
background-color: red;    
}    
    
.fname.ng-dirty.ng-invalid-minlength {    
background-color: orange;    
}    
    
.lname.ng-valid {    
background-color: lightgreen;    
}    
    
.lname.ng-dirty.ng-invalid-required {    
background-color: red;    
}    
    
.lname.ng-dirty.ng-invalid-minlength {    
background-color: orange;    
}    

.email.ng-valid {    
background-color: lightgreen;    
}    
    
.email.ng-dirty.ng-invalid-required {    
background-color: red;    
}   

Also we created a seperate JS file which will have a Angular JS code to validate all text fields for Required Field, Minimum length, Email format. Include the angular.min.js file in both html file and the .js file which will be used to create a controller in it.

/// <reference path="scripts/angular.min.js" />
angular.module('myApp', [])
.controller('myController', function ($scope) {
    var self = this;      
});

Add a custom style in .css file to style the page. Below is the controller which is nothing but a JavaScript file having a javascript function in it which declares a module and a controller and then registers a controller with the module screenshot

This is the final HTML file which uses the angular JS to validate the fields. The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS - Validation</title>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script src="customScript.js" type="text/javascript"></script>
    <link href="customStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form class="designForm" ng-app="myApp" ng-controller="myController" name="myForm" novalidate>
  
        <div class="layoutFields">
        <p>
        <label>First Name:</label>
            <input type="text" name="firstname" placeholder="First Name" ng-model="firstname" class="fname" required ng-minlength="4">
            <span style="color:red" ng-show="myForm.firstname.$dirty && myForm.firstname.$invalid">
                <span ng-show="myForm.firstname.$error.required">First Name is required.</span>
                <span ng-show="myForm.firstname.$error.minlength">Minimum length Required is 4</span>                
            </span>
        </p>

        <p>
            <label>Last Name:</label>
            <input type="text" name="lastname" placeholder="Last Name" class="lname" ng-model="lastname" required ng-minlength="4">
            <span style="color:red" ng-show="myForm.lastname.$dirty && myForm.lastname.$invalid">
                <span ng-show="myForm.lastname.$error.required">Last Name is required.</span>
                <span ng-show="myForm.lastname.$error.minlength">Minimum length Required is 4</span>
            </span>
        </p>
        <p>
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:</label>
            <input type="email" name="email" placeholder="Email" class="email" ng-model="email" required>
            <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">Email is required.</span>  
                <span ng-show="myForm.email.$error.email">Invalid email address</span>                
            </span>
        </p>        
        <br />       
        </div>
    </form>
</body>
</html>

Here is the final output screen

.

Print
Posted: May 5, 2018,
Categories: .NET Platform,
Comments: 0,
Author: Urish Arora
Tags: AngularJS
Rate this article:
5.0

Urish AroraUrish Arora

Other posts by Urish Arora

, Contact author

Please login or register to post comments.

Name:
Email:
Subject:
Message:
x

SEARCH

Categories

«October 2019»
MonTueWedThuFriSatSun
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

  • Featured Posts
  • Recent Posts
  • Recent Comments
Dynamics365Authority is a community platform for Professionals and Students to contribute or share their knowledge and skills on Microsoft Dynamics 365 Technologies. Our primary goal is to invite professionals on Dynamics 365 technology across the world to contribute & share their knowledge and skills through their blogs so that we can help other developers.
Stay updated with Dynamics 365 technology. Improve skills and knowledge from our blogs, articles and code snippets. Learn it. Follow professionals and learn from them.
Unified Service Desk Book(Online Edition) 

FOLLOW US

Stay connected with us on our social media channels for latest articles, blogs posts etc.  We will keep updating regularly on our social media platform and web platform.

FACEBOOK

Follow us on Facebook

 

TWITTER

View all our tweets

 

DYNAMICS365AUTH

Join us now

 

BLOGS

View our blogs

 

 

Latest Blog

Posted: Jun 20, 2019

Overview - Appendix (Unified Service Desk)

This blog is about Appendix

Read more
Posted: Jun 20, 2019

Overview - Troubleshoot and Debug (Unified Service Desk)

This blog is about Troubleshoot and Debug in Unified Service Desk

Read more
Posted: Jun 20, 2019

Overview - Performance (Unified Service Desk)

This blog is about the Performance in Unified Service Desk

Read more
RSS

ADDITIONAL RESOURCES

Dynamics 365 Authority.com - Search the library for "Dynamics 365"

  What's New in Dynamics 365

  Dynamics 365 Documentation

  

  Sign-up for 30 days trial

 

 

Recent comments

Ashish:

Nice blog. Very helpful to get all references to white papers at one place.

Previous Next

About Us

Here comes the Dynamics 365 Authority - Great technical blog posts are hidden gems. They are hard to find simply because not enough of us write them in the first place. Yet technical blogging is one of the best things we can do not only for ourselves, but also as members of the wider community of developers.

Dynamics 365 Authority leverages this platform to help developers and users to move from traditional paper-based process to modern digital business process. Dynamics365Authority.com helps your business grow, evolve and transform.

Dynamics365Authority.com is your Digital Transformation Partner

Recent Posts

Overview - Appendix (Unified Service Desk)

This blog is about Appendix
  • 216
  • Article rating: 5.0

Overview - Troubleshoot and Debug (Unified Service Desk)

This blog is about Troubleshoot and Debug in Unified Service Desk
  • 303
  • Article rating: 5.0
RSS

Follow Us

 

Tag cloud: Dynamics365Authority.com with Urish Arora; Dynamics365Authority.com; Sales; Leading community site on MS Dynamics 365; Dynamics 365 Authority; Service;Top CRM Blogs; Urish Arora - Australia's leading expert on Digital Transformation;  Digital Transformation; Field Service;Top Articles on MS Dynamics CRM Relationship Insights; Office 365 Security Compliance; Project Service; Microsoft Dynamics 365 for Sales; Relevance Search; Goal Metrics; Activities and Case; Sales Literature;Knowledge Management;

Terms Of UsePrivacy StatementCopyright 2019 by Dynamics365Authority
Back To Top