lc-validation-summary

Distribution streams

Download

Install with Bower

$ bower install lc-validation-summary

Dependencies

• AngularJS

Getting started

1. Add references to AngularJS and lc-validation-summary's js and css files
2. Where you declare your app module, add lc-validation-summary:

angular.module('myApp',['lc-validation-summary']);

3. Wrap your html form with the directive lc-validations-container:

<div lc-validations-container>
  <form name="userForm">
    <label for="userName">Name:</label>
    <input name="userName"
           type="text"
           ng-model="model.name"/>
  </form>
</div>

4. Now, each input in the form you want to validate must contain a lc-validation-bubble wich will notify the non-passing validations to the lc-validations-container. Then add one of the default supported validations or add your custom validation (in this example we use ng-required) and define a validation-friendly-name to show in the view

<div lc-validations-container>
  <form name="userForm">
    <label for="userName">Name:</label>
    <input name="userName"
           type="text"
           ng-model="model.name"
           ng-required="true"
           lc-validation-bubble=""
           validation-friendly-name="User Name" />
  </form>
</div>

Note: Don't miss adding the name attribute to the <form> and each of your <input> elements.
5. In your html file, within the controller where you want to use lcValidationSummary, add a div element with thelc-validation-summary directive. This div will show the validation results to the user interface :

<div lc-validation-summary=""></div>

And we're done! Now the validation summary will notify the user when the input is empty.This is the final code and result:

In this simple tutorial, the validation message "this field is mandatory", is the associated message to the angular ng-required directive. Check out more advanced samples to see how to set your custom messages and custom directives .

Default values

Default supported Validations

Customize

Adding custom Validations

1. Register your custom Validation in your app

myApp.directive('myCustomValidation',fcn(...){...});

2. Use the method addValidation() from the validationContainerServiceProvider to add a validation item with the following fields:

   { type: 'myCustomDirective', friendlyDescription: 'myErrorMessage' }

3. In the html code, add your directive to an input field

<input name="myInput"
       my-custom-validation=""
       lc-validation-bubble=""
       validation-friendly-name="myInputFriendlyName"/>

Adding custom error messages

1. Add the parameter validation-custom-error-directive and set it to the name of the validation you want the input field to have. Wether it's a custom or a default one.
2. Add the parameter validation-custom-error-message and set it to the message you want to show when the validation is not passing.

<input name="myInput"
       validation-custom-error-directive="myCustomValidation"
       validation-custom-error-message="My custom error mesage"
       validation-friendly-name="myInputFriendlyName"
       lc-validation-bubble=""/>
           

Using a custom template

1. Create a new js file and name it whatever you want.
2. Copy the content of lcvalidationSummary-tpl.js into your new file.
3. Overwrite the template with your custom style and html.

Code Samples

Sample 00 - Validating two input fields

This sample moves one small step forward by adding another input field to the form.

Sample 01 - Using different angular validations

You can use a set of different angular built in validations and apply them to each input in a form.

Sample 02 - Using a custom validation

Here is where the fun stuff starts! Use your own angular directives to validate input fields your own way. In this sample we're using a home-made directive named check-two-fields-match that validates if a couple fields are matching. Usually needed when requiring e-mail addresses.

Sample 03 - Adding custom error messages

Add custom error messages to your directive by using the parameter validation-custom-error-message

Sample 04 - Using a custom template

Overwrite the lcValidationSummary. template by simply linking to a custom template file lcValidationSummary-tpl.js