Skip to content

Top New Best Ask Show Jobs

Formance.js – Library for formatting and validating form fields | Better HN

Formance.js – Library for formatting and validating form fields (opens in new tab)

(omarshammas.github.io)

54 pointsomarshammas12y ago29 comments

29 comments

slg12y ago

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.

omarshammasOP12y ago

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/

slg12y ago

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.

tolas12y ago

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

eranation12y ago

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/

siong198712y ago

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.

michaelmior12y ago

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

flylib12y ago

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

akbar50112y ago

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.

eluos12y ago

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

omarshammasOP12y ago

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.

RaphiePS12y ago

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.

ianstormtaylor12y ago

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.

omarshammasOP12y ago

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.

GBB12y ago

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.

omarshammasOP12y ago

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.

jbackus12y ago

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

omarshammasOP12y ago

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

jbackus12y ago

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.

jacobbijani12y ago

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.

omarshammasOP12y ago

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

hyperturtle12y ago

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

omarshammasOP12y ago

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

zen_boy12y ago

Great plugin!

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

BaconJuice12y ago

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

bigd12y ago

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

JazCE12y ago

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

DustinCalim12y ago

What about international numbers?

omarshammasOP12y ago

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

j / k navigate · click thread line to collapse