Angular validation directive with validation rules and error messages.
npm install angular-form-validatornpm install angular-form-validatorIt'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
``javascript
require('angular-form-validator');
var clientApp = angular.module('clientApp', [
'ngFormValidator'
]);
`
`html`
##### Also don't forget to include CSS file.
`html`
`html
ng-model="firstName"
ngform-validator="{type: 'number', min: ['Number must be min 45', 45]}"
ngform-validator-options="{validateOn: 'keyup'}">
{{errMsg.firstName}}
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.html
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'}">
{{errMsg.cstm}}
`
7. Options
html
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.html
//submit button is disable only when 'eml' or 'maxstr' have bad validations. Use ng-disabled dirctive.
`9. Reseting form
To reset whole form and clear all errors use ngform-validator-reset directive. Reset will be activted on click.html
`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
html
//code example
ng-model="eu.germany.company.employer.email"
ngform-validator="{type: 'string', email: 'Email is not valid.'}"
ngform-validator-options="{validateOn: 'keyup'}">
{{errMsg.eu.germany.company.employer.email}}
``Licensed under MIT .
(Freely you received, freely give. , Mt10:8)