|
1 | 1 | # Bootstrap Angular Validation (No jQuery) |
2 | 2 |
|
| 3 | +**Inspired by Bootstrap + jQuery form validation** |
| 4 | + |
| 5 | +There are some libraries and various blog post with examples out there which dictates how we can do the basic form |
| 6 | +validation in AngularJS application. But those examples are full of code duplicacy and some uses jQuery but there are |
| 7 | +no generic solutions. |
| 8 | + |
| 9 | +This library solves the pain of various [Bootstrap](getbootstrap.com) + AngularJS developers by providing |
| 10 | +[jQuery like validation](https://jqueryvalidation.org/documentation/)(of course without the jQuery) and using the |
| 11 | +Bootstrap's [form validation classes](http://getbootstrap.com/css/#forms-control-validation). |
| 12 | + |
| 13 | +## Features |
| 14 | + |
| 15 | +**A few things to look out for when playing around** |
| 16 | + |
| 17 | +1. Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user |
| 18 | +can tab through fields without getting annoying messages – they won't get bugged before having the chance to actually |
| 19 | +enter a correct value |
| 20 | + |
| 21 | +2. Once a field is marked invalid, it is eagerly validated: As soon as the user has entered the necessary value, the |
| 22 | +error message is removed. |
| 23 | + |
| 24 | +3. If the user enters something in a non-marked field, and tabs/clicks away from it (blur the field), it is |
| 25 | +validated – obviously the user had the intention to enter something, but failed to enter the correct value. |
| 26 | + |
| 27 | +4. After trying to submit an invalid form, the first invalid element is focused, allowing the user to correct the field. |
| 28 | + |
| 29 | +## Compatibility |
| 30 | + |
| 31 | +IE 8 & below are not supported. |
| 32 | + |
| 33 | +## Demo |
| 34 | + |
| 35 | +**Coming soon** |
| 36 | + |
| 37 | +## Usage |
| 38 | + |
| 39 | +### 1. Install via Bower |
| 40 | + |
| 41 | +```shell |
| 42 | +bower install bootstrap-angular-validation --save |
| 43 | +``` |
| 44 | + |
| 45 | +### 2. Add the script to your main HTML file (like index.html) |
| 46 | + |
| 47 | +```html |
| 48 | +<script src="bower_components/bootstrap-angular-validation/dist/bootstrap-angular-validation.min.js"></script> |
| 49 | +``` |
| 50 | + |
| 51 | +Make sure CSS for Bootstrap is also included in your application. Read the [docs](http://getbootstrap.com/getting-started/#download) |
| 52 | + |
| 53 | +### 3. Add dependency to your application |
| 54 | + |
| 55 | +```javascript |
| 56 | +var myApp = angular.module("foo", ["bootstrap.angular.validation", "other-foo-depenency"]); |
| 57 | +``` |
| 58 | + |
| 59 | +### 4. HTML view change |
| 60 | + |
| 61 | +Change all your `ng-submit` to `on-submit` in all your `<form>` tags (Fix for this change coming soon) |
| 62 | + |
| 63 | +### Now Rock!! |
| 64 | + |
| 65 | +Basic Bootstrap validation has enabled in your forms. No further setup and no alternation required. Try submitting a |
| 66 | +form with some validation and see the magic. **Make sure your form elements are designed as |
| 67 | +Bootstrap [suggests](http://getbootstrap.com/css/#forms).** |
| 68 | + |
| 69 | +## Default error messages |
| 70 | + |
| 71 | +| Validation | Message | |
| 72 | +| ------------- |-------------| -----| |
| 73 | +| required | This field is required. | |
| 74 | +| email | Please enter a valid email address. | |
| 75 | +| url | Please enter a valid URL. | |
| 76 | +| number | Please enter a valid number. | |
| 77 | +| digits | Please enter only digits. | |
| 78 | +| min | Please enter a value greater than or equal to {{validValue}}. | |
| 79 | +| max | Please enter a value less than or equal to {{validValue}}. | |
| 80 | +| length | Please enter all {{validValue}} characters. | |
| 81 | +| minlength | Please enter at least {{validValue}} characters. | |
| 82 | +| maxlength | Please enter no more than {{validValue}} characters. | |
| 83 | +| editable | Please select a value from dropdown. | |
| 84 | +| pattern | Please fix the pattern. | |
| 85 | +| equalTo | Please enter the same value again." |
0 commit comments