Validating User Input on a Form in Angular JS

I have often seen entry level developers struggling with user input validation in AngularJS single page applications. In this post, I will give a quick but useful introduction of validations in AngularJS; consider this post as a base learning document from which you can do further learning.

Let’s start with an example as shown in the image below. You have a registration form with three fields with the following restrictions.

  1. Name : Required
  2. Email : Required and type Email
  3. Password : Required , type password and minimum length 6

We want to validate the rules mentioned above at the client side. There are two ways client side validation can be done in an AngularJS based single page application:

  1. Using the HTML5 validations
  2. Using the AngularJS validation directives
  3. A Combination of both

HTML5 validation

Here we’ve created the Add user form shown above using the mark up listed below:

image

Read full article on the Infragistics blog

Published by

Dhananjay Kumar

Dhananjay Kumar is Developer Evangelist for Infragistics. He is a 8 times Microsoft MVP and well respected Developer Advocate in India.He is the author of 900+ Blog Posts, and can often be found speaking around India at conferences and hosting free workshops for programmers across the country. So far, he has hosted 60 free workshops on various topics like JavaScript, Angular, WCF, ASP.NET MVC, C#, Azure etc. Follow him on twitter @debug_mode for all the updates about his blog posts and workshops. You can send him email at debugmode [at] outlook [dot] com

2 thoughts on “Validating User Input on a Form in Angular JS”

  1. Hi DJ,

    Finally Learning Angular JS from you through your blog. Proud of you and lots of love and respect.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s