valdr

Model centric

With valdr, you don't add AngularJS validation rules to HTML markup. Instead you define model-based constraints in JSON and bind the forms or parts thereof to your models. Benefits: all in one place, DRY.

Keep constraints in sync

Keep validation rules in sync with the back-end. For Java back-ends the valdr Bean Validation plugin is the perfect companion. For other platforms it's easy to write your own service which provides validation rules in JSON.

Simple error messages

Define the template used to show error messages once. Then let valdr add it to the dirty form fields. There is no need to repeat yourself for every input field. Need i18n? valdr integrates nicely with angular-translate!

How it works

Instead of having constraint definitions scattered throughout input/form markup, valdr offers to define constraints and messages in code (or load them from the back-end):

myApp.config(function(valdrProvider) {
  valdrProvider.addConstraints({
    'Person': {
      'firstName': {
        'size': {
          'min': 3,
          'max': 20,
          'message': 'First name is required to be between 3 and 20 characters.'
        },
        'required': {
          'message': 'First name is required.'
        }
      }
  });
});

Now use the valdr-type directive to apply those constraints to one or multiple form elements:

<form valdr-type="Person">
    <label for="firstName">First Name</label>
    <input type="text"
           id="firstName"
           name="firstName"
           ng-model="person.firstName">
</form>

That's it! valdr will validate the firstName input field with the size and the required validator. It will set the $validity of this form item accordingly.

Demo

This is a simple demo which uses CSS to show the validation messages only when the field is blurred and invalid.

The demo uses the following constraints:

{{ getConstraints() | json }}

Model centric

Keep constraints in sync

Simple error messages

How it works

Demo

Want to know more?