sagrawal31 / bootstrap-angular-validation

Provides Bootstrap form validation in Angular - No jQuery required

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.

1. This module uses ES5 style guide.

Compatibility

1. Minimum AngularJS version required: 1.3.0. If you are using an older version of AngularJS, please use the version 0.0.1 of this library but that have some known bugs which are fixed in newer versions.

2. 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.

bootstrap-angular-validation's Issues

Allow custom error message resolvers

This entire project is great, especially the level of customization, however I've found a place of extension and want to raise a feature/enhancement issue.

I am happy to fork this repository, make the changes and then request a pull back in. 😄

Currently, when a error message is shown via the simple or tooltip message services, they get the message from the validation service by called 'getErrorMessage' which then internally calls 'resolveMessage'. At this present time, resolveMessage will just attempt to get the message from the global config of messages, however it would be great to be able to have a custom message resolve service that could be called to. This would mean we could create a message resolve service that, for example, uses angular translate to get the messages from translation files instead, of from a reference data service that fetches data from a web api and caches etc; there are many possibilities.

I propose we allow the ability for developers to create custom resolvers for the messages and just have a default one that falls back to the current config.

Is this a feature you would be happy to merge in should someone code it?

Issue with Latest wiredep version

Hi Team,

First Off, great library. Thanks for creating this!!

But recently i have been seeing some console errors and the validation not working properly after updating to the latest version of grunt-wiredep(3.0.1). The console error looks like:

TypeError: a.parents is not a function
    at Object.isValidationDisabled 

at dist/bootstrap-angular-validation-all.min.js:1:9087)

As per the latest wiredep changelog, the breaking changes are:
REMOVED: Auto-detecting paths outside of a block.

Previously, if your source file included a reference to one of your Bower dependencies outside of your block, wiredep wouldn't inject it inside of the block. This was originally done to support using Modernizr.js in the section of your HTML file without it being re-injected in the . Not only is this no longer Modernizr's recommended practice, but we have since added the exclude option in wiredep's configuration that would allow you to duplicate this behavior without any magic.

REMOVED: Elite dependencies.

Previously, wiredep kept a list of packages that were known to be required before any other scripts. This included jQuery, es5-shim, etc. This was originally done in the very early days of Bower, as packages weren't properly listing their dependencies (if they even had a bower.json at all!). Things have come a long way since then, and this should no longer be required. If you are using packages that don't list their dependencies properly, offer them a PR with the correction.

https://github.com/taptapship/wiredep/releases

Could either of these be the issue??

Thanks,
Sebastian

Styleguide

I would like to recommend you to read the Airbnb Javascript styleguide: https://github.com/airbnb/javascript

afterwards I would like to refactor the code to match that style.

If you are programming with atom, there is a nice plugin which is https://atom.io/packages/linter-jscs.
This plugin fixes a lot of stuff automagically.

Even if Jscs is outdated and no longer maintained, I would suggest you to use this atom plugin it really makes your life easier.

even though you might want to use the eslint linter instead of jshint.
For both linters is a styleguide available at: https://github.com/airbnb/javascript/tree/master/linters

Coding style is not only a matter of taste but also crucial for Open Source commitment, reusability and maintainability.

Problem with async validators

I'm trying to use an async validator combined with your module, my api return a 200 response if email is unique and a 400 response if it's already in use.

Have you tried using async validators?

I think your module needs some way to notice if validity has changed after an async validator has been deferred.

Or do you have an working example.

The field am testing with looks like this:

<div class="form-group">
		<label for="email">E-mail</label>
		<div class="input-group">
				<div class="input-group-addon"><i class="fa fa-envelope"></i></div>
				<input ng-model="admin.email" id="email" name="email" class="form-control" type="email" required is-unique-admin-email ng-model-options="{debounce: 250}" />
		</div>
</div>

ctrl.$asyncValidators.uniqueAdminEmail = function(modelValue, viewValue)
{
	return $http({
		url: "/validate/unique-admin-email?email=" + value,
		method: "GET",
	})
		.then(function()
		{
			return $q.resolve();
		}, function()
		{
			return $q.reject();
		});
};

Issue validating Bootstrap

I am having issues validating radio buttons using Bootstrap's button plugins below.
http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons

I'm trying to validate the last example on the link above. I can get validation to work if I use data-toggle="buttons" but then angular binding breaks.

Do you have any example to perform validation on radio buttons using Bootstrap's button plugin.

Support filters on error messages

The ability to use angular filters on messages would be pretty helpful to a lot of people, I for one. We should allow developers to specify one of more filters, in the order to apply them, that will then be applied when resolving/fetching the error message for a field validation issue.

To configure message filters...

Via config: bValidationConfig.global.useMessageFilters('' or []);
Via attribute: -notification-filter=""

If the attribute is specified, it will use those over the config specified ones; a kind of override.

Keep it Simple keep it Clean

The request interception might be a useful feature in some cases.
From my perspective these cases are quite rare.
Therefore i suggest to not bloat this module with several edge and special cases.
A clean module which does:

• add missing validations to angulars standard validations set.
• add a directive which watches the "validity" of a single [ form > form-group > form-control] and conditionally add and remove bootstrap classes and error messages

that would be more then enough and as simple that everyone understands what it does.

Remove requirement of changing "ng-submit" to "on-submit"

Make bs-validation directive to work without parent form element

Option to customize error messages

I though it'd be nice if the library allowed to globally alter the error messages being displayed. E.g.

var app = angular.module("bavApp", ["bootstrap.angular.validation"]);

app.config(['bsValidationConfigProvider', function(bsValidationConfigProvider) {
  bsValidationConfigProvider.global.messages.required = "Come on, I can't work without it";
}]);

Add default message and warning for custom validation with no message

Add to npm installation

Please add npm support as bower seems to get dated.

Add demo page

Tooltip error messages doesn't destroy on scope destroy or page change

Include non-minificated sources in bower package

When using main-bower-files, the .min.js file is omitted for automated injecting of deps.

Intentional [bs-form-group] should be priority as a parent, than .form-group

When you are using bs-form-group property, you put it purposely, so module should take it as a priority in getFormGroupElement. and not to try to first search for .form-group.

Option to display error messages as tooltip

Ability to distinguish between has-error and required

Hello,

I was wondering if there was a way (using your module) to distinguish between when something is "error" or "required"??

If not, but you'd welcome this functionality, I'd be happy to implement it and send a PR.

As a future advancement (if the above is approved) I think it would be good if you could specify a "genericValidator" and then explicitly give it a class to put on the form-group element. E.g. min = "has-min" which would allow users to style the form-group element differently depending on the "type" of validation failure

Thanks, Ryan

required attribute with expression

Hi Shasshank,

I have situation where the input field needs to made mandatory based on a condition. My html is as below:

`

PO Number:
<input type="text" id="inputPO" class="form-control" name="po" maxlength="10"
ng-model="invoice.PO" required**="isPORequired"**>

` Notice the 'required' attribute has a binding to scope object/variable. if isPORequired is set to 'true' only then it should validate.

Can this be achieved? Appreciate your input.

Thanks & Regards.

Use $submitted of formController instead of custom scope variable

Use standard Validation mechanics of angular

Currently the validations are executed via a watchCollection.

It would be more angular style if the validations are added to the angular standard validation set to work like all the other validations: -> angular documentation

Just the custom classes should be added and removed by watching the "validity" of a form.
That would improve the incapsulation of this module.

Custom validators support

I though it'd be cool if one would be able to add his own validator support to the module, e.g. something like this:

        .config(['bsValidationConfigProvider', (bsValidationConfigProvider) => {
            var messages = {
                myCustomValidator: 'My custom validator says your input is invalid'
            };

            angular.extend(bsValidationConfigProvider.global.messages, messages);

           bsValidationConfigProvider.global.customValidators = ['myCustomValidator'];
        }])