angular-validator

MIT License

This is an AngularJS form validation written in CoffeeScript and thinking in AngularJS not jQuery.

Installation

bower

$ bower install https://github.com/kelp404/angular-validator.git\#0.2.9 -S

Frameworks

1. jQuery 3.3.1

2. AngularJS 1.5.11

3. Bootstrap 3

If your error is string in rules you should include bootstrap3.css and use form-group to the input div.

$validator

angular.module'yourApp', ['validator']

register

# .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

$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

$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

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"]

<divclass="form-group"><labelfor="required0" class="col-md-2 control-label">Required</label><divclass="col-md-10"><inputtype="text" ng-model="formWatch.required" validator="[required]"
class="form-control" id="required0" placeholder="Required"/></div></div>

validator="/^regex$/", [validator-error="msg"], [validator-invoke="watch"], [required], [validator-required="true/false"], [validator-group="group"]

<divclass="form-group"><labelfor="regexp0" class="col-md-2 control-label">RegExp [a-z]</label><divclass="col-md-10"><inputtype="text" ng-model="formWatch.regexp" validator="/[a-z]/"
validator-invoke="watch" validator-error="it should be /[a-z]/"
class="form-control" id="regexp0" placeholder="RegExp [a-z]"/></div></div>

[required], [validator-required="true/false"]

If the element has this attribute, $validator will add the rule required into rules of the element.

validator.rules

angular.module'yourApp', ['validator.rules']

There are default rules in this module.

• required
• number
• email
• url

Example

<!-- Bootstrap3 (not required) --><linktype="text/css" rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/><!-- jQuery --><scripttype="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- AngularJS --><scripttype="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script><!-- $validator --><scripttype="text/javascript" src="dist/angular-validator.js"></script><!-- basic rules (not required) --><scripttype="text/javascript" src="dist/angular-validator-rules.js"></script>

<!-- submit --><divclass="panel panel-default"><divclass="panel-heading"><h3class="panel-title">submit</h3></div><formclass="form-horizontal panel-body"><divclass="form-group"><labelfor="required2" class="col-md-2 control-label">Required</label><divclass="col-md-10"><inputtype="text" ng-model="formSubmit.required" validator="[requiredSubmit]" class="form-control" id="required2" placeholder="Required"/></div></div><divclass="form-group"><labelfor="regexp2" class="col-md-2 control-label">RegExp [a-z]</label><divclass="col-md-10"><inputtype="text" ng-model="formSubmit.regexp" validator="/[a-z]/" validator-error="it should be /[a-z]/" class="form-control" id="regexp2" placeholder="RegExp [a-z]"/></div></div><divclass="form-group"><labelfor="http2" class="col-md-2 control-label">$http</label><divclass="col-md-10"><inputtype="text" ng-model="formSubmit.http" validator="[backendSubmit]" class="form-control" id="http2" placeholder="do not use 'Kelp' or 'x'"/></div></div><divclass="form-group"><divclass="col-md-offset-2 col-md-10"><inputtype="submit" ng-click="submit()" class="btn btn-default"/></div></div></form><divclass="panel-footer">{{formSubmit}}</div></div>

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 anddata.status<400anddata.datareturnnoif value in (x.namefor x indata.data)
returnyeselsereturnnoerror:"do not use 'Kelp' or 'x'"# submit - required$validatorProvider.register'requiredSubmit',
validator:RegExp"^.+$"error:'This field is required.'

# CoffeeScript# the form model$scope.formSubmit=required:''regexp:''http:''# the submit function$scope.submit=->v=$validator.validate $scope, 'formSubmit'v.success-># validated successconsole.log'success'v.error-># validated errorconsole.log'error'

// JavaScript// the form model$scope.formSubmit={required: '',regexp: '',http: ''};// the submit function$scope.submit=function(){$validator.validate($scope,'formSubmit').success(function(){// validated successconsole.log('success');}).error(function(){// validated errorconsole.log('error');});};

Unit Test

$ grunt test

Development

# install node modules
$ npm install
# install bower components
$ bower install

# run the local server and the file watcher to compile CoffeeScript
$ grunt dev
# compile coffee script and minify
$ grunt build