In this article I will explain with an example, how to perform Forms validation for Input fields such as Textboxes, DropDownLists, etc. in AngularJS.
 
 

HTML Markup

The HTML Markup consists of following elements:
div – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML Form has been assigned with a novalidate directive.
novalidate – It is an HTML5 attribute which directs the Browser to disable the HTML5 validations on submitting the Form.
Note:Disabling validation means preventing Browser inbuilt functionality of validation of HTML Form.
 
TextBox – For capturing user input.
The HTML INPUT TextBox has been assigned with an AngularJS ng-model and ng-required directive.
Note: For more details on ng-model directive, please refer my article Using ng-model directive in AngularJS.
 
ng-required – It is used to specify that the TextBox cannot be kept empty during Form submission.
 
SPAN – For displaying Error message.
The HTML SPAN has been assigned with the AngularJS ng-show directive.
The Error SPAN will be displayed when the for the Field which is set as Required and the Form is submitted.
Example:
MyForm.Name.$error.required && MyForm.$submitted
 
The above condition means that the HTML SPAN is associated with Name Field and will display Error hen Name field do not contain value.
Note: For more details on ng-show directive, please refer my article Simple AngularJS ng-show and ng-hide Tutorial with example.
 
Button – For submitting the form.
<div ng-app="MyApp" ng-controller="MyController">
    <form name="MyForm" ng-submit="submitForm(MyForm.$valid)" novalidate=novalidate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Name:</td>
                <td><input type="text" ng-model="Name" name="Name" ng-required="true" /></td>
                <td><span class="error" ng-show="MyForm.Name.$error.required && MyForm.$submitted">Name is required.</span></td>
            </tr>
            <tr>
                <td>Age:</td>
                <td><input type="text" ng-model="Age" name="Age" ng-required="true" /></td>
                <td><span class="error" ng-show="MyForm.Age.$error.required && MyForm.$submitted">Age is required.</span></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td><input type="text" ng-model="Country" name="Country" ng-required="true" /></td>
                <td><span class="error" ng-show="MyForm.Country.$error.required && MyForm.$submitted">Country is required.</span></td>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit">Submit</button></td>
            </tr>
        </table>
    </form>
</div>
 
 

Validating Input and Forms in AngularJS

Inside the HTML Markup, the following script file is inherited:
1. angular.min.js
The controller is kept empty as it is not required.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function () { });
</script>
 
 

Screenshot

Implement Form Validation in AngularJS
 
 

Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code