Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kelp404/angular-validator
AngularJS form validation.
https://github.com/kelp404/angular-validator
angularjs coffeescript
Last synced: 10 days ago
JSON representation
AngularJS form validation.
- Host: GitHub
- URL: https://github.com/kelp404/angular-validator
- Owner: kelp404
- License: mit
- Created: 2013-11-01T09:49:37.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2018-03-10T09:44:11.000Z (over 6 years ago)
- Last Synced: 2024-10-13T08:57:38.515Z (28 days ago)
- Topics: angularjs, coffeescript
- Language: CoffeeScript
- Homepage: http://kelp404.github.io/angular-validator/
- Size: 282 KB
- Stars: 162
- Watchers: 16
- Forks: 46
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-validator [](http://travis-ci.org/kelp404/angular-validator) [](https://david-dm.org/kelp404/angular-validator#info=devDependencies)
[MIT License](http://www.opensource.org/licenses/mit-license.php)
This is an AngularJS form validation written in [CoffeeScript](http://coffeescript.org) and **thinking in AngularJS not jQuery**.
## Installation
**bower**
```bash
$ bower install https://github.com/kelp404/angular-validator.git\#0.2.9 -S
```
## Frameworks
1. [jQuery](https://jquery.com/) 3.3.1
2. [AngularJS](http://angularjs.org/) 1.5.11
3. [Bootstrap 3](http://getbootstrap.com/)
> If your `error` is `string` in rules you should include bootstrap3.css and use `form-group` to the input div.
## $validator
```coffee
angular.module 'yourApp', ['validator']
```
#### register
```coffee
# .config
$validatorProvider.register = (name, object={}) ->
###
Register the rule.
@params name: The rule name.
@params object:
invoke: 'watch' or 'blur' or undefined(validate by yourself)
init: function(scope, element, attrs, $injector)
validator: RegExp() or function(value, scope, element, attrs, $injector)
error: string or function(value, scope, element, attrs, $injector)
success: function(value, scope, element, attrs, $injector)
###
# .run
$validator.register = (name, object={}) ->
```
#### validate
```coffee
$validate.validate = (scope, model) =>
###
Validate the model.
@param scope: The scope.
@param model: The model name of the scope or validator-group.
@return:
@promise success(): The success function.
@promise error(): The error function.
###
```
#### reset
```coffee
$validate.reset = (scope, model) =>
###
Reset validated error messages of the model.
@param scope: The scope.
@param model: The model name of the scope or validator-group.
###
```
## validator.directive
```coffee
a = angular.module 'validator.directive', ['validator.provider']
validator = ($injector) ->
restrict: 'A'
require: 'ngModel'
link: (scope, element, attrs) ->
###
The link of `validator`.
You could use `validator=[rule, rule]` or `validator=/^regex$/`.
###
validator.$inject = ['$injector']
a.directive 'validator', validator
```
#### validator="[rule, rule]", [required], [validator-required="true/false"], [validator-group="group"]
```html
Required
```
#### validator="/^regex$/", [validator-error="msg"], [validator-invoke="watch"], [required], [validator-required="true/false"], [validator-group="group"]
```html
RegExp [a-z]
```
#### [required], [validator-required="true/false"]
If the element has this attribute, $validator will add the rule `required` into rules of the element.
## validator.rules
```coffee
angular.module 'yourApp', ['validator.rules']
```
There are default rules in this module.
+ required
+ number
+ email
+ url
## Example
```html
```
```html
submit
Required
RegExp [a-z]
$http
```
```coffee
a = angular.module 'app', ['validator', 'validator.rules']
a.config ($validatorProvider) ->
$validatorProvider.register 'backendSubmit',
validator: (value, scope, element, attrs, $injector) ->
$http = $injector.get '$http'
h = $http.get 'example/data.json'
h.then (data) ->
if data and data.status < 400 and data.data
return no if value in (x.name for x in data.data)
return yes
else
return no
error: "do not use 'Kelp' or 'x'"
# submit - required
$validatorProvider.register 'requiredSubmit',
validator: RegExp "^.+$"
error: 'This field is required.'
```
```coffee
# CoffeeScript
# the form model
$scope.formSubmit =
required: ''
regexp: ''
http: ''
# the submit function
$scope.submit = ->
v = $validator.validate $scope, 'formSubmit'
v.success ->
# validated success
console.log 'success'
v.error ->
# validated error
console.log 'error'
```
```js
// JavaScript
// the form model
$scope.formSubmit = {
required: '',
regexp: '',
http: ''
};
// the submit function
$scope.submit = function () {
$validator.validate($scope, 'formSubmit')
.success(function () {
// validated success
console.log('success');
})
.error(function () {
// validated error
console.log('error');
});
};
```
## Unit Test
```bash
$ grunt test
```
## Development
```bash
# install node modules
$ npm install
# install bower components
$ bower install
```
```bash
# run the local server and the file watcher to compile CoffeeScript
$ grunt dev
# compile coffee script and minify
$ grunt build
```