JarCastingangular-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
<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>
Built-in validation in angular-validation-rule
- Required
- Url
- Number
- Min length
- 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