AngularJS form validation.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
rules
src
test
.editorconfig
.gitignore
.travis.yml
Gruntfile.coffee
LICENSE
README.md
index.html
ncu
package.json

README.md

angular-validator Build Status devDependency Status

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

<div class="form-group">
    <label for="required0" class="col-md-2 control-label">Required</label>
    <div class="col-md-10">
        <input type="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"]

<div class="form-group">
    <label for="regexp0" class="col-md-2 control-label">RegExp [a-z]</label>
    <div class="col-md-10">
        <input type="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) -->
<link type="text/css" rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<!-- $validator -->
<script type="text/javascript" src="dist/angular-validator.js"></script>
<!-- basic rules (not required) -->
<script type="text/javascript" src="dist/angular-validator-rules.js"></script>
<!-- submit -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">submit</h3>
    </div>
    <form class="form-horizontal panel-body">
        <div class="form-group">
            <label for="required2" class="col-md-2 control-label">Required</label>
            <div class="col-md-10">
                <input type="text" ng-model="formSubmit.required" validator="[requiredSubmit]" class="form-control" id="required2" placeholder="Required"/>
            </div>
        </div>
        <div class="form-group">
            <label for="regexp2" class="col-md-2 control-label">RegExp [a-z]</label>
            <div class="col-md-10">
                <input type="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>
        <div class="form-group">
            <label for="http2" class="col-md-2 control-label">$http</label>
            <div class="col-md-10">
                <input type="text" ng-model="formSubmit.http" validator="[backendSubmit]" class="form-control" id="http2" placeholder="do not use 'Kelp' or 'x'"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" ng-click="submit()" class="btn btn-default"/>
            </div>
        </div>
    </form>
    <div class="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 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.'
# 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'
// 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

$ 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