Formance.js – Library for formatting and validating form fields | Hacker News Reader

Formance.js – Library for formatting and validating form fields

omarshammas.github.io

54 pointsomarshammas29 comments

Somewhat off topic, but I wish there was a credible site out there that reviewed these type of general libraries. There are hundreds of them out there and when I need to find one it usually comes with hours of research trying to decide on the right one to use. It would be great if there was a place to look up the general strengths and weaknesses of each without doing all the necessary leg work.

You make a good point, I'm not familiar with many of these libraries. Can you please provide some links.

I'm familiar with:

- Stripe jQuery.payment.js (formance is based on this project, extended beyond payment forms) https://github.com/stripe/jquery.payment

- Masked Input (good for basic formatting, and does not include validating) https://github.com/digitalBush/jquery.maskedinput

- Validate.js (does not include formatting) http://rickharrison.github.io/validate.js/

I think he meant JS libraries in general. Not just formatting libraries.

I was just speaking in general terms. I am not familiar enough with this particular niche to know all the competing libraries, which is basically my original point. I wouldn't use a library like this in any major product of mine until I did the necessary research and decided it was truly the best option. I imagine numerous other developers have the same process before relying on a library for their own projects. That is a lot of redundant work researching and evaluating these things.

yeah but for each category there is already hundreds of libraries with new ones popping up every week, it would be a massive time consuming effort to just analyze one category and keep up with any recent developments in it, times that by say 20 categories and your looking at 100's of hours of effort

There is the jQuery Plugin Registry (http://plugins.jquery.com/). There aren't many people using it tho.

There is also a really simple guideline to publish your plugin there: http://plugins.jquery.com/docs/publish/

Currently, there is no way to review which plugin is better. But at least it shows the number of watchers for each plugin, which can be an okay indicator whether a plugin is good or bad.

That is useful, but obviously only applies to jQuery plugins.

Agreed...and you're not the first person to mention this need.

A good curation/ranking site for all of the various JS libs would be helpful.

Its wasteful for every developer to read the code of numerous JS libs just to figure out which one(s) was(were) written well.

There is http://www.jsdb.io/ and there is another one which I'm searching in my bookmarks, will update.

EDIT: found it - http://jster.net/

I wish they wouldn't show error prompts when the user has just started entering characters

The demo was just meant to show what you can do with the formatters and the validators.

Those error prompts are not part of the library. In the demo, I setup some event listeners that get triggered on 'keyup change blur'. In the callback function, the value of the input field is validated and a message is shown to the user.

Maybe for your needs, it can be triggered on 'blur'. Or you even create your own setup. Formance.js simply provides the formatters and validators, and you can plug and play however you see fit.

I agree, way too many sites do this. I've done usability tests and users get scared that they're doing something wrong.

I just listen for a blur event and then display errors until it's actually valid.

If you're looking for a nice validation API that doesn't require jQuery, I've been working on one recently for forms: https://github.com/segmentio/validate

I personally really dislike working with jQuery plugins, because their APIs tend to be very poorly thought out. And using strings as a way to call methods is generally unfortunate, especially when they are snake-cased like these ones.

I'm watching your repo to see how it evolves, I like the structure of your api. Best of luck.

Regarding Formance, it uses jQuery to setup the necessary event listeners to provide the field formatting.

On the other note snake-cased is a preference, I would happily provide camelCased if there is demand.

For North American phone numbers, it's fairly common to input your phone number with the preceding country code of 1. It would be nice if the library accounted for that.

true, i can add that in as an option. I just wanted to there to be less clutter and confusion for the user if they see a 1 without entering it themselves.

You should make these compatible with Parsley.js: http://parsleyjs.org/documentation.html

First time I hear of Parsley.js. I will check it out, thanks

Parsley.js is absolutely fantastic. I've been able to cover 95% of my usual form validation for various websites by just including a few attributes on my form inputs. That is about as elegant as form validation can get in my opinion. Some of your functionality is already covered but I'm pretty sure they don't have some of the Canada specific functionality you have. Might warrant a Parsley plugin.

A few of them (phone number) break if you CMD-A to select all and start typing, to replace the entire value. It just deselects and appends rather than overwriting.

what browser and version are you using because it should work.

If I fill out the phone number all the way, then go back with the arrow keys and try to delete/change numbers, I get weird behavior

thanks for the feedback, I see the error as well. I created an issue and will take a closer a look.

Great plugin!

Is there something similar for AngularJS that supports input limiting and formatting?

aaannddnd it works in IE7! Beautiful. Thank you. Will be using this for sure!

I'm so going to test 4242 4242 4242 4242 in every shopping website now.

if it can't validate emails according to the RFC's don't include email "validation"

What about international numbers?

That field has not been created yet, but formance is flexbile enough. More than happy if you would like to contribute one!

https://github.com/omarshammas/jquery.formance/wiki/Contribu...

Reply on news.ycombinator.com