Home

Awesome

npm version Bower version Build Status

angular.validators

Angular validation directives using validator.js

THIS PROJECT IS NO LONGER MAINTAINED. I WILL MERGE NEW PRs THOUGH

Contents

Install

$ bower install angular.validators

Include the module in your dependencies

angular.module('myProject',[
    'angular.validators'
])

Supported functions

Currently the following functions are supported.

DirectiveDescriptionArguments
containscheck if the string contains the seedstring
equalscheck if the string matches the comparison.string
is-aftercheck if the string is a date that's after the specified date (defaults to now).date
is-alphacheck if the string contains only letters (a-zA-Z).
is-alphanumericcheck if the string contains only letters and numbers.
is-asciicheck if the string contains ASCII chars only.
is-base64check if a string is base64 encoded.
is-beforecheck if the string is a date that's before the specified date (defaults to now).date
is-booleancheck if a string is a boolean
is-credit-cardcheck if the string is a credit card.
is-currencycheck if the string is a valid currency amountas in validator.js isCurrency
is-datecheck if the string is a date.
is-divisible-bycheck if the string is a number that's divisible by anotherInt
is-emailcheck if the string is an email.as in validator.js isEmail
is-fqdncheck if the string is a fully qualified domain name (e.g. domain.com).
is-floatcheck if the string is a float.
is-full-widthcheck if the string contains any full-width chars.
is-half-widthcheck if the string contains any half-width chars.
is-hex-colorcheck if the string is a hexadecimal color.
is-hexadecimalcheck if the string is a hexadecimal number.
is-ipcheck if the string is an IP (version 4 or 6).4, 6
is-isbncheck if the string is an ISBN (version 10 or 13).10, 13
is-isincheck if the string is an ISIN (stock/security identifier)
is-iso8601check if the string is a valid ISO 8601 date.
is-incheck if the string is in a array of allowed values.array e.g ['a','b','c']
is-intcheck if the string is an integer.
is-jsoncheck if the string is valid JSON (note: uses JSON.parse).
is-lowercasecheck if the string is lowercase.
is-mobile-phonecheck if the string is a mobile phone numberzh-CN, en-ZA, en-AU, pt-PT, el-GR. For el-GR landline and mobile phones are validated.
is-mongo-idcheck if the string is a valid hex-encoded representation of a MongoDB ObjectId.
is-multibytecheck if the string contains one or more multibyte chars.
is-nullcheck if the string is null.
is-numericcheck if the string contains only numbers.
is-urlcheck if the string is a URL.
is-uuidcheck if the string is a UUID (version 3, 4 or 5).3, 4, 5
is-uppercasecheck if the string is uppercase.
is-variable-widthcheck if the string contains a mixture of full and half-width chars.
is-surrogate-paircheck if the string contains any surrogate pairs chars.
watch-equalscheck if the string matches the comparison.ngModel

Use

To use a validator simply include the angular directive in an input element.

<form name="form">
  <input type="text" ng-model="value" name="value" is-mongo-id />
</form>

You can use multiple directives at once

<form name="form">
  <input type="text" ng-model="value" name="value" is-alpha is-lowercase />
</form>

Async Validation

As of version 3.41.3 angular validators support async validation. To use async validation first you have to configure the asyncValidatorProvider in your app.js

angular.module('my-project', [
    ...,
    'angular.validators'
])
.config(['asyncValidatorProvier', function(asyncValidatorProvider){
    asyncValidatorProvider
        .baseUrl('http://localhost:1337')
        .endpoint('usernane', '/api/username/{value}')
        ...
}])

Some words on the api: the api must return a JSON object that has an attribute named data and within an other attribute that contains the result. The default name for the attribute is 'valid'. You can change the name of the attribute on the config phase using the 'responseField' function.

The available options for asyncValidatorProvider are the following:

functionargumentsdescriptionexample
baseUrl(string)stringsets the base url for api (helper function).baseUrl('http://localhost:1337')
defaultState(boolean)booleanthe default state of the validator (defaults to false)..defaultState(true)
endpoint(name, url)name: string, url: stringsets an endpoint with an easy to use name.endpoint('username', '/api/account/{value}
httpVerb(verb)verb:stringSets the http verd that the api accepts for async validation, defaults to get.httpVerb('post')
invalidResponse(response)response: stringthe response the api returns if the value is invalid, defaults to 'false'.invalidResponse('false')
minLength(length)length: intthe min length that the view value neeeds to have in order to make a call to the api, defaults to 3.minLength(4)
responseField(field)field: stringchange the name of the field that contains the respone.responseField('valid')
validResponse(response)response: stringthe response the api returns if the value is valid, defaults to 'true'.invalidResponse('true')
wildcard(string)stringasync validators uses a place holder to replace the value on the string of the url, defaults to '{value}'wildcard(':value')

All asyncValidatorProvider return the asyncValidatorProvider instance for easy chaining.

To use the directive simply include it in your html:

<form name='form'>
    <input type='text' ng-model='value' name='value' async-valid='username'>
</form>

You can override some global values from the directive itself like this

attributevaluefunction that overrides
async-default-statestringdefaultState(state)
async-invalid-responsestringinvalidResponse(response)
async-min-lengthint, stringminLength(length)
async-valid-responsestringvalidResponse(response)

** if you have any problems with async-valid create an issue on Github

Validator service

Angular validators exposes validatorjs as an angular service named nodeValidator. More on validator.js