Formance.js – Library for formatting and validating form fields

Formance.js – Library for formatting and validating form fields(omarshammas.github.io)

54 points by omarshammas 12 years ago | 29 comments

slg 12 years 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.

omarshammas 12 years 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/

slg 12 years 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.

tolas 12 years ago | | |

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

eranation 12 years 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/

siong1987 12 years 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.

michaelmior 12 years ago | | |

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

flylib 12 years 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

akbar501 12 years 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.

eluos 12 years ago |

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

omarshammas 12 years 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.

RaphiePS 12 years 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.

ianstormtaylor 12 years 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.

omarshammas 12 years 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.

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

omarshammas 12 years 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.

jbackus 12 years ago |

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

omarshammas 12 years ago | |

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

jbackus 12 years 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.

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

omarshammas 12 years ago | |

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

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

omarshammas 12 years ago | |

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

zen_boy 12 years ago |

Great plugin!

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

BaconJuice 12 years ago |

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

bigd 12 years ago |

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

JazCE 12 years ago |

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

DustinCalim 12 years ago |

What about international numbers?

omarshammas 12 years 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...