sagrawal31/bootstrap-angular-validation

Provides Bootstrap form validation in Angular - No jQuery required

Hi there 👋

 

Serial entrepreneur. 10+ years of hands-on experience developing a product/platform from scratch. For me, any or every code written (even test code) must be optimised for formatting, standard, performance, reusability and scalability (I know it's too much). I enforce this in every pull/merge request from my team and try to educate them every time (sometimes they get frustrated 😃 ) because every small thing matters.

I'm a developer from the core, so continuous learning is something that I never miss. My playground:

• Design & develop complex yet user-friendly applications
• Find solutions to complex & challenging problems
• Peer review my team's code and spot things without running
• Share my knowledge (it doesn't matter if they are a fresher)
• Contribute to open source community
  

🧑🏻‍💻  Founder & CTO

Reinventing In-App Messaging (Try NOW on your website)
Helping companies combine the power of design and data to deliver one to one personalisation for customer engagement

One to One Personalisation @ Scale
Deliver Tailored design with the automated continuous learning platform

🛠  Tools & Technologies

                       

                   

📖  Contributions

💬  Ask me about

• Anything from the above tools & technologies
• Web Development
• Code performance
• Code styling
• Dev productivity
• Code debugging

🗣  Proud discussions which improved the libraries

1. CleverTap SDK - Plugin conflicting with Firebase plugins
2. Ziggeo SDK - RuntimeException: stop failed after recording is completed
3. Ziggeo SDK - This repository is not the SDK, consider renaming it
4. Ziggeo SDK - JavaScript exception while uploading video after recording in Cordova app

😂  Fun time

bootstrap-angular-validation's Issues

Make bs-validation directive to work without parent form element

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.

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

Option to display error messages as tooltip

Add to npm installation

Please add npm support as bower seems to get dated.

Add default message and warning for custom validation with no message

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.

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";
}]);

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.

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.

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

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();
		});
};

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'];
        }])

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.

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?

Use $submitted of formController instead of custom scope variable

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.

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.

Add demo page

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

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.