AngularJS Form Validation FeedBack
Learn how to use AngularJS Form Elements, Directives and Variables for Form Validation and Feedback.
AngularJS Forms : Validation Feedback
The AngularJS provides a set of directives and variables that can be used to provide to the user a detailed feedback about validation status, errors and even hints.
To perform Validation and provide Feedback AngularJS makes use of CSS classes, Directives and Variables, and based on user interaction with form elements a feed back is provided.
AngularJS Forms : Validation Feedback using CSS
The AngularJS checks the status of form elements each time a user provides an input for validation.
The validation depends upon the nature of nature of element and its settings, eg: different settings for checkbox , select and email validation elements.
The result of these validation checks can be combined with CSS classes to provide feedback to the user by applying style effects using CSS classes.
Table : AngularJS Form Validation Dynamically Managed Validation Classes
|ng-pristine||Class is set, if the user has not yet interacted with the form element.|
|ng-dirty||Class is set, if the user has not interacted with the form element.|
|ng-valid||Class is set, if the form is valid|
|ng-invalid||Class is set, if the form is invalid|
As the state of the form changes, such that when a valid form get an invalid input, AngularJS dynamically adds and removes the CSS class to reflect the change in form state.
The user has an option of using custom CSS classes, to set styles for each state.These classes can be used to assign CSS class for various interactions like keystrokes, clicks for individual elements as well as complete form.
AngularJS Forms : Provide FeedBack using Validation Classes.
In the demo, three classes are used ng-dirty, ng-valid and ng-invalid.Form Elements with valid input turn to green background.
The reason ng-dirty is used in combination with ng-valid to provide realtime feedback about the input but not before the user begins to enter an input, hence ng-dirty is used.
Example: AngularJS Forms Validation FeedBackGive it a TRY! » Note: Before the user begins to provide any input, the elements are in ng-pristine
AngularJS Forms : FeedBack for Specific Validations
AngularJS also allows you to add element elements to classes inorder to get specfic informations about each of the validation conditions applied to the form element.
In the demo, the email has a required attribute. AngularJS adds the form element to classes ng-valid-required and ng-invalid-required to denote compliance with attribute required
Similarly, classes ng-valid-email and ng-invalid-email to denote compliance with email format.
Example: AngularJS Forms FeedBack for Specific Validations ChecksGive it a TRY! » Note:These validations are use to guide step by step validation checks.
AngularJS Forms: FeedBack using Special Variables
The AngularJS also provides some special variables to verify the validation status of individual form elements or entire form,eg: to show the visibility or details of the error.
In the demo, we use the directive ng-show to show or hide the status, also the special variable $error returns an object with properties denoting different validation conditions.
Example: AngularJS Forms Feedback using Special VariablesGive it a TRY! » Note:The error object contains properties of all conditions applied on the form elements.
AngularJS Forms : Providing Feedback using Scripts
In the process of giving the user detailed feedback for a number of conditions, a lot of HTML elements are used , many of which simply duplicate the same status.But using AngularJS we can reduce the HTML element needed.
In the demo, a behaviour called showFeedBack is defined, it gets the object $error from the validaiton elements and return a string depending upon the properties defined.
Example: AngularJS Forms Providing FeedBack using ScriptsGive it a TRY! » Note: The error object may have multiple properties, since properties depend upon the validation errors.
AngularJS Forms : Delaying the Validation Feedback
AngularJS bi-directional binding feature makes it to respond in realtime, the feedback for validation begins to show as soon as the user provides a single character as input.At times, it feels too responsive.
To override the default feedback style, users can delay the feedback by modifying the addCustomer behaviour, such that it validates the complete form and return true if the validation feedback should be displayed.