JarCasting
Bootstrap Angular Validation (No jQuery)
Inspired by Bootstrap + jQuery form validation
There are some libraries and various blog post with examples out there which dictates how we can do the basic form validation in AngularJS application. But those examples are full of code duplicacy and some uses jQuery but there are no generic solutions.
This library solves the pain of various Bootstrap + AngularJS developers by providing jQuery like validation(of course without the jQuery) and using the Bootstrap's form validation classes.
- This module uses ES5 style guide.
Compatibility
-
Minimum AngularJS version required: 1.3.0. If you are using an older version of AngularJS, please use the version
0.0.1of this library but that have some known bugs which are fixed in newer versions. -
IE 8 & below are not supported.
Change Log
See Releases for changes.
Usage
1. Install via Bower
bower install bootstrap-angular-validation --save
2. Add the script to your main HTML file (like index.html)
<script src="bower_components/bootstrap-angular-validation/dist/bootstrap-angular-validation-all.min.js"></script>
Make sure CSS for Bootstrap is also included in your application. Read the docs
3. Add dependency to your application
var myApp = angular.module("foo", ["bootstrap.angular.validation", "other-foo-depenency"]);
Now Rock!!
Basic Bootstrap validation has enabled in your forms. No further setup and no alternation required. Try submitting a form with some validation and see the magic.
Detailed Documentation, Configurations & Examples:
http://sagrawal31.github.io/bootstrap-angular-validation/
Known Issues
Using jQuery
TypeError: a.parents is not a function
at Object.isValidationDisabled
at dist/bootstrap-angular-validation-all.min.js:1:9087)
This library was developed to be used without the requirement of jQuery by adding a few helpful methods (for example: find, parents etc.) to the Angular's jqLite but if your app uses jQuery then the jQuery MUST be added before angular to use the methods from jQuery itself instead of jqLite otherwise you will see various errors in the console while using this library or displaying the validation errors might not work.
<!-- First include jquery -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- And then Angular -->
<script src="bower_components/angular/angular.js"></script>
<!-- And then other dependencies -->
If you are using grunt-wiredep >= v3.0.0 (or eventually wiredep >= v3.0.0) and having trouble injecting jquery before angular, then add the following in your bower.json file under the "overrides" block:
"angular": {
"dependencies": {
"jquery": "3.2.1"
}
}
This will tell wiredep that jquery is needed for angular and should be added before angular.