Package Exports

angular-form-validator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-form-validator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular-form-validator

Angular validation directive with many validation rules and custom error messages. Validation rules are simmilar to mongoose validation rules!

1. Installation

npm install angular-form-validator

2. Description

This is angular module which gives you angular directive for HTML form validation.

easy to integrate in your existing angular 1.4+ project
many default validation rules inspired by mongoose validation
validation on almost all jQuery events: 'change', 'keyup', 'click', 'blur' ...etc
developer can create custom validation rules
developer can define custom error messages
not dependant on any CSS framework (Bootstrap, Foundation, Material, ...etc) or any JS library like jQuery
100% native angular

It's not only validator but corrector. For example date will be automatically converted to Sat Dec 01 2001 00:00:00 GMT+0100 (CET) format.

DEMO: https://smikodanic.github.io/angular-form-validator/
DEMO CODE: https://github.com/smikodanic/angular-form-validator/blob/master/index.html

3. Integration

If you use browserify in your angular project

require('angular-form-validator');

var clientApp = angular.module('clientApp', [
    'ngFormValidator'
]);

If you use compiled version (/dist/ folder) include it in HTML file

<script src="... /angular-form-validator/dist/js/ngFormValidator.js"></script>

Also don't forget to include CSS file.

<head>
    <link rel="stylesheet" type="text/css" href="./dist/css/ngFormValidator.css">
</head>

4. Angular Directive

Directive is ngformValidator and must be applied as a tag attribute. Config (rules and error messages) are defined inside config object.

<input type="text" list="countrylist" class="form-control"
    ng-model="firstName"
    ngform-validator="{type: 'number', min: ['Number must be min 45', 45]}"
    ngform-validator-options="{validateOn: 'keyup'}">

<p class="help-block" ng-cloak>{{errMsg.firstName}}</p> <!-- error output -->

5. Validation rules

TYPE VALIDATORS

string - accepts any string value
number - accepts integer or float numbers (12 , 12.23, 1.2e-21)
date - accept valid date formats mm/dd/yy , mm/d/yyy hh:mm:ss , m.d.yy , mm.dd.hh and converts it automatically
boolean - Any string or 'true' converts to boolean true. String 'false' converts to boolean false. (This is corrector, not validator!)

MIN, MAX, BETWEEN

min - If type:'number' then it will compare two numbers (input >= number). If type:'string' will validate number of characters.
max - If type:'number' then it will compare two numbers (input <= number). If type:'string' will validate number of characters.
between - If type:'number' (number1 <= input <= number2). If type:'string' will validate number of characters.

STRING

alpha - letters only
alphanumeric - letters with numbers only (special characters are not allowed)
lowercase - letters must be lowercase, if not it will be converted automatically
uppercase - letters must be uppercase, if not it will be converted automatically
ucfirst - capitalize first letter

NUMBER

int - check if number is integer (52) and if not it will make correction
float - check if number is float (52.123) and if not it will make correction

MISC

email - Validate inserted email (john@site.co)
url - check if input is valid URL (http://... or https://...)
tel - check if input is valid phone number ((123) 456-7890, +(123) 456-7890, 123-456-7890, 123.456.7890, 1234567890, +31636363634, 075-63546725)
sameAs - compare two input fields (for example 'Password' and 'Repeat password')
emptySpaces - clear empty spaces in a string (validator and corrector)
regex - test input against regular expression
enum - limit input string to offered values
price - must be Number (type:'Number'), round number to 2 decimals. This is corrector, not validator.

(You are wellcome to make pull request and add extra validator functions.)

6. Custom validator

Beside built-in validators you can use custom validators. Use attribute ngform-validator-custom and define function inside it.

<div ng-class="{'form-group': true, 'has-error': errMsg.cstm}">
    <label for="cstm" class="col-sm-5 control-label">3+ chars <small>(string, validate onKeyup)</small></label>
        <div class="col-sm-5">
            <input type="text" id="cstm" class="form-control"
                    ng-model="cstm"
                    ngform-validator="{type: 'string'}"
                    ngform-validator-custom="function (input) {
                        var err = (input.length >= 3) ? '' : 'Insert 3+ characters!';
                        return err;
                    }"
                    ngform-validator-options="{validateOn: 'keyup'}">
            <p class="help-block" ng-cloak>{{errMsg.cstm}}</p>
        </div>
</div>

7. Options

ngform-validator-options="{validateOn: 'keyup'}"

validateOn: 'change' | 'keyup' (or any other jQuery event ) defines on which JS event field validation will take effect

Notice: 'required' validation is onBlur by default and can't be changed.

8. Disabling form fields and buttons

Submit button or input field can be disable on specific form field errors.

//submit button is disable only when 'eml' or 'maxstr' have bad validations. Use ng-disabled dirctive.
<button type="button" class="btn btn-primary" ng-click="mySubmit()" ng-disabled="errMsg.eml || errMsg.maxstr">Submit</button>

9. Reseting form

To reset whole form and clear all errors use ngform-validator-reset directive. Reset will be activted on click.

<button type="button" class="btn btn-warning" ngform-validator-reset>Reset</button>

10. Multilevel scope objects

Scope object can have up to 5 levels, like ng-model="europe.company.employers.developers.name" .

DEMO: https://smikodanic.github.io/angular-form-validator/index2.html
DEMO CODE: https://github.com/smikodanic/angular-form-validator/blob/master/index2.html

//code example
<input type="text" size="21"
    ng-model="eu.germany.company.employer.email"
    ngform-validator="{type: 'string', email: 'Email is not valid.'}"
    ngform-validator-options="{validateOn: 'keyup'}">
<span style="color:Maroon;font-size:smaller" ng-cloak>{{errMsg.eu.germany.company.employer.email}}</span>

11. Licence

Licensed under MIT .

(Freely you received, freely give. , Mt10:8)