A highly customizable set of directives for AngularJS to create and display validation messages for forms, and increase your app's usability.
2 people use it
Author: 3727015?v=3 GabiGrin
Submitted by: 3727015?v=3 GabiGrin

Build Status Coverage Status


Add validation messages to your forms in a breeze



PS: It doesn't cover everything yet, more to come.

What it does

This directive adds automatic validation messages to your forms, by just adding it to your form and fields. It also prevents your form from being submitted unless it's valid. For example: example image

When writing forms, a you will soon find yourself writing the same code over and over again, just to display what is invalid in the form. This directive turns this: ``` This field is required Please enter at least 20 chars

//inside controller $scope.doSomething(){ if (myForm.$valid){ //then actually do something } } ```

into this: ```

//inside controller $scope.doSomething(){ //actually do something } ```

It comes with a bunch of predefined messages for commonly used validation messages, such as email, number, minlength, url and more. You can always override them if you think the stock messages suck!

What it doesn't do

It doesn't create custom validation rules, there are plenty of modules for that. It doesn't make your forms prettier, use Bootstrap/Foundation/Zimit/Custom css for that.


Use bower: bower install angular-valiadtion-messages Or just download the files and add the following files to your html: <link rel="stylesheet" type="text/css" href="bower_components/angular-validation-messages/dist/angular-validation-messages.css"> <script src="bower_components/angular-validation-messages/dist/angular-validation-messages.js"></script> Add 'gg.vmsgs' to your app dependencies (angular.module('yourApp', ['gg.vmsgs'])

Now just add the "vmsg-form" directive to your forms, and "vmsg" to the inputs you wish to show validation messages for.


  • Just-add-water form validation messages
  • Allows custom message templates to be used
  • Does not require "name" attribute to be intact
  • Submit only valid forms
  • Customize error messages
  • Override options either globally, per form or per control
  • Supports different show/hide message triggers
  • 100% test coverage
  • No jQuery used, no other dependencies - 100% AngularJS
  • Out of the box bootstrap parent form-group has-error support

Overriding options

To override global options, use ValidationMessagesHelper.setOptions(yourOptions) in a run block.
vmsg-form and vmsg directive can also receive an options object. When multiple overrides are used, the most specific one "wins".

Supported options

Name | Explanation | Accepts| Default ---|---|--- showTrigger| trigger to show messages | blur/keydown/submit | blur hideTrigger| trigger to hide messages | valid/keydown|valid messageClassName| class name added to the message dom element | any string | 'validation-message' messageTemplate| html to use as the template for the messages. | any valid html, with 1 root, containing a element (which will receive the message | hideClassName | class that is added to hide messages | any classname | ng-hide parentErrorClassName | adds (or removes) a class name to a field's parent element, if it matches the 'parentErrorClassName' option. Good for using with bootstrap, where you want to add 'has-error' to the parent div.form-group | any string | 'has-error'
parentContainerClassName | only if this class name is present in the parent element, parentErrorClassName will be applied | any string | 'form-group' errorMessages| allows you to override error messages for specific errors. The error messages passed will be combined with the default ones (using angular.extend)| any valid object | please check src/helper.js:36


*The vmsg-form directive will add the "novalidate" attribute automatically, so the browser doesn't catch the validation issues by itself. *It doesn't support hiding the messages when the form is pristine at the moment. Will be added in the near future. *When overriding the message html template, you must have only one root element, and include the where you want the message displayed. There is no validation for this yet, so be aware.


PR are more than welcome! Please make sure you do not brake the build, and add tests for any new features added, maintaining 100% coverage (TDD is highly recommended). To start hacking just clone the repository and run npm install + bower install, then run 'grunt serve'.

comments powered by Disqus
This page was last updated almost 4 years ago.