

Formance.js – Library for formatting and validating form fields - omarshammas
http://omarshammas.github.io/formancejs

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

~~~
omarshammas
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](https://github.com/stripe/jquery.payment)

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

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

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

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

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

------
ianstormtaylor
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](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.

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

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

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

------
jbackus
You should make these compatible with Parsley.js:
[http://parsleyjs.org/documentation.html](http://parsleyjs.org/documentation.html)

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

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

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

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

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

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

------
zen_boy
Great plugin!

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

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

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

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

------
DustinCalim
What about international numbers?

~~~
omarshammas
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...](https://github.com/omarshammas/jquery.formance/wiki/Contributing)

