AngularJS Validation

In the previous article we saw how AngularJS can be used to retrieve values entered by the user in form fields. This article extends the previous one. In this article we shall see how AngularJS Validation is performed to validate user input. We know that AngularJS is a JavaScript framework which is a client side language. Therefore, AngularJS validation also occurs on the client side. It is important to note that client side validations are not secure. Therefore you must implement server side validations as well. So let’s start with a very basic example of AngularJS validation.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 	
    <p>Input field is invalid if empty:</p>

    <form name="ValForm">
    <input name="textInput" ng-model="textInput" required>
    </form>

    <p>If the text field input valid?:</p>
    <h1>{{ValForm.textInput.$valid}}</h1>
</div>

</body>
</html>

Download the code Try the code

Take a look at the above code. It contains a text box with a condition “required”. This means that the state of the text box will only be valid if it contains some text. The state of the text box shall be invalid if it is empty. Below the text box, the state is printed via AngularJS expression “ValForm.textInput.$valid”. This expression says that print the validation state of “textInput” field inside the form name “ValForm”. This returns true if the text box has valid input. Otherwise it returns false.

Therefore, if you open the webpage, by default the text box is empty and false will be printed as its condition. Now if you enter something in the text box, false will change to true denoting that text field is in valid state now.

Email Validation

Let’s take a look at another example. Here we shall validate if a text field contains valid email dress. In the text box, we shall use HTML5 email attribute to specify that this text field must contain an email. Then using AngularJS we shall check the state of the text field and notify the user. Have a look at the code.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 	
    <p>Enter a valid email address in text field</p>

    <form name="ValForm">
    <input type="email" name="emailInput" ng-model="emailInput">
    </form>

    <p>If the field contain valid email?</p>
    <h1>{{ValForm.emailInput.$valid}}</h1>
  
    
</div>

</body>
</html>

Download the code Try the code

Now open the above web page in a browser. You should see an empty text box. However, the AngularJS validation expression will still return true. This is because we did not specify that the field is required. Therefore, the expression will return true if the text field is empty. Now, try entering an invalid email. The expression will return false. Now, again enter correct email, the expression will again return true.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .