Client-side Validation for AngularJS

Downloads in past


702171.4.54 years ago10 years agoMinified + gzip package size for angular-validation in KB


angular-validation 1.4.5 ========================= NPM version Build Status Code Climate Coverage Status devDependency Status Gitter chat Client-side Validation should be simple and clean.
Don't let Client-side Validation dirty your controller. Setup your Validation on config phase by using some rules (example)
If you prefer schema over html attributes , try angular-validation-schema (Demo)
And add Validation in your view only. angularjs 1.2.x support to version angular-validation 1.2.x
angularjs 1.3.x support after version angular-validation 1.3.x
angularjs 1.4.x support after version angular-validation 1.4.x Requirement ----- AngularJS 1.2.x (for angular-validation 1.2.x)
AngularJS 1.3.x (for angular-validation 1.3.x)
AngularJS 1.4.x (for angular-validation 1.4.x) DEMO ----- Install ----- Install with npm ``` npm install angular-validation ``` or with bower ``` bower install angular-validation ``` Using angular-validation --- ```html ``` ```js angular.module('yourApp', 'validation'); // OR including your validation rule angular.module('yourApp', 'validation', 'validation.rule'); ``` Writing your First Code ==== ```html
<div class="row">
<input type="text" name="required" ng-model="form.required" validator="required">
<input type="text" name="url" ng-model="form.url" validator="required, url">
<button validation-submit="Form" ng-click="next()">Submit</button>
<button validation-reset="Form">Reset</button>
``` Documentation API Built-in validation in angular-validation-rule ===
  1. Required
  1. Url
  1. Email
  1. Number
  1. Min length
  1. Max length
5 and 6 require you to pass an inline parameter to set the length limit. Eg, maxlength=6. Anyone can give a PR for this angular-validation for more built-in validation Integrating with Twitter Bootstrap ===== To integrate this package with Bootstrap you should do the following. Add the following LESS to your project ```css{
.has-error .form-control;
} label.has-error.control-label {
.has-error .control-label;
} ``` Change the Error HTML to something like: ```javascript $validationProvider.setErrorHTML(function (msg) {
return  "<label class=\"control-label has-error\">" + msg + "</label>";
}); ``` You can add the bootstrap class .has-success in a similar fashion. To toggle .has-error class on bootstrap .form-group wrapper for labels and controls, add: ```javascript angular.extend($validationProvider, {
validCallback: function (element){
invalidCallback: function (element) {
}); ``` License ----- MIT CHANGELOG ===== See release CONTRIBUTORS ===== Thank you for your contribution @lvarayut and @Nazanin1369 :heart:
Thanks for all contributors