angular-validation 1.4.4

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

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

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

Writing your First Code

<form name="Form">     <div class="row">         <div>             <label>Required</label>             <input type="text" name="required" ng-model="form.required" validator="required">         </div>         <div>             <label>Url</label>             <input type="text" name="url" ng-model="form.url" validator="required, url">         </div>         <button validation-submit="Form" ng-click="next()">Submit</button>         <button validation-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