angular-validation 1.4.5

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

http://hueitan.github.io/angular-validation/

Install

Install with npm

npm install angular-validation

or with bower

bower install angular-validation

Using angular-validation

<scriptsrc="dist/angular-validation.js"></script><scriptsrc="dist/angular-validation-rule.js"></script>

angular.module('yourApp',['validation']);// OR including your validation ruleangular.module('yourApp',['validation','validation.rule']);

Writing your First Code

<formname="Form"><divclass="row"><div><label>Required</label><inputtype="text" name="required" ng-model="form.required" validator="required"></div><div><label>Url</label><inputtype="text" name="url" ng-model="form.url" validator="required, url"></div><buttonvalidation-submit="Form" ng-click="next()">Submit</button><buttonvalidation-reset="Form">Reset</button></div></form>

Documentation API

Built-in validation in angular-validation-rule

1. Required
2. Url
3. Email
4. Number
5. Min length
6. 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

.ng-invalid.ng-dirty{
.has-error .form-control;
}
label.has-error.control-label {
.has-error .control-label;
}

Change the Error HTML to something like:

$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:

angular.extend($validationProvider,{validCallback: function(element){$(element).parents('.form-group:first').removeClass('has-error');},invalidCallback: function(element){$(element).parents('.form-group:first').addClass('has-error');}});

License

MIT

CHANGELOG

See release

CONTRIBUTORS

Thank you for your contribution @lvarayut and @Nazanin1369 ❤️
Thanks for all contributors