Hacker News new | past | comments | ask | show | jobs | submit login
Extend Twitter Bootstrap with these Bootstrap Form Helpers (vlamanna.github.com)
96 points by vlamanna on Oct 19, 2012 | hide | past | favorite | 43 comments



I use select2 with bootstrap http://ivaynberg.github.com/select2/

works impressively well for using inside forms.


I saw this on HN at some point but forgot to bookmark/save it in some way, I think it's really awesome. As a Swede I always have to select the box and type "S" a lot of times to get to "Sweden", I'd rather just type in "Swe" like you can do with this. :)


T and scroll up a couple ;)


Indeed! I just switched over to select2 from Chosen yesterday. The excellent UI of Chosen, but with a MUCH better API.


That looks cool!


This is really very impressive! Loved it!


The phone one is poor usability. Why is the text indicator half way through the input when it inserts text at the beginning?


I agree, I will rework this part. The main challenge was support for IE on this one.


Also on the phone part, it falls down if the phone number has an extension.

I would work on a way to have the formatting decorators (parentheses, dashes etc) only show up if there is data past that point.

So you could include " x" in the event that someone types in an extension or something like that.

Properly parsing/formatting phone numbers is harder than you'd think..

How do you specify the mask for different numbering schemes (other regions/countries)?

Do you pick one dynamically based on the selected country? Do you have that database of masks-to-country?

What if my contact number is international or foreign (even if I pick my country as USA)? Do you let the user select a mask? That feels clunky and more work than just leaving the phone number free-form..


It also allows you to paste any text in, and it will no longer match the mask.



The phone field would be amazing to have polished, and I think you'd see a lot of adoption for just this field.


It doesn't work with a numpad either. Seems terribly broken overall.


It also fails on UK phone numbers, because it assumes a London-style number.


And the number pad doesn't work.

Otherwise, I like it though.


+1 on this. I thought it didn't work at all since I was using the Num pad for the phone number then realized numeric keys work.


Awesome. I took the effort and found all timezones across the world and put them into a select for http://commando.io. Would be cool to have a Bootstrap plugin for this. Here is the select HTML markup.

https://gist.github.com/3919205


I appreciate the effort but your list is just plain wrong.

1. It's not "all timezones across the world" but rather Windows time zones from a particular version of Windows. Most people use the much more accurate Olson database that actually gives you correct time offsets, daylight savings rules, etc.

2. Your option values, i.e. offsets, are either meaningless, or if someone actually uses them, erroneous. For example, current UTC is 17:40 but current Central is 12:40 not 11:40. Again, use the Olson database if you want better time conversions - Windows offset numbers are just a part of the timezone name, not an actual offset.

3. Timezone names differ depending on the language settings on your PC, and your list is only a small EN subset of the time zones, which, given the international nature of the list, is not very useful. If your users are in a non-American time zone, it is very likely that their time zone name is not on your list.

4. Timezone names differ from version to version, and are not backward compatible. Your list is only correct for whatever version you collected it on so it should be identified as such. Even better, if someone actually needs Windows timezones - like I said above, most likely you need the Olson timezones - they should take them from the source, by running the tzutil utility, or from microsoft.com.

Your list should be identified as what it is, a list of Windows time zones, (?) OS version. Even then, it's dangerous that whoever stumbles upon it will use the offsets for time conversions.


Actually, I got the timezones from WikiPedia (http://en.wikipedia.org/wiki/Time_zone) not Windows. I manually went through the WikiPedia list and built up the list. Then I have a checkbox; is daylight savings [ ].

The name list is just one or two major cities. The assumption is users know their offset.

I appreciate your comments thought.


I just did a search on that page on a couple specific time zones included in your list, and couldn't hit any results for: Caracas or Brussels. It doesn't seem you linked the right page?

As far as separate checkbox for daylight savings: (1) there are more rules than just daylight savings, and moreover some timezones have daylight savings other than 1 hour (this is rare but still); (2) most languages have libraries that will calculate the timezone for you, and it's both easier and more accurate, both for the user and the developer, to use these libraries to do all the heavy lifting for you.


Caracas is `-4:30 hours` which is the same as 'Venezuela` in WikiPedia. Just wanted to stick with cities.


That's a really good idea. Will do it. https://github.com/vlamanna/BootstrapFormHelpers/issues/5


The country / state linked selects is very nice, but the phone masking feature seems still work in progress, I use this one for input masks in general: http://digitalbush.com/projects/masked-input-plugin/


I'm impressed with how responsive the author has been in the comments here. It seems like each concern is met with a reply and even some times he creates an issue item for it in Github. Nice work!


Thanks! I hope this open source project will help people build better forms.


This might be a good place to remind you that if you are dealing with international customers, don't make "state" a required field.


Or make that much assumptions about their phone numbers


Phone number input doesn't work with num keys.



A couple of issues in Chrome (stable): I can't type in or move the cursor between sub-fields on the phone controls.

Where does your country-state data comes from? I've never seen a list so complete for countries outside the US!


The issues with the phone controls will be fixed. https://github.com/vlamanna/BootstrapFormHelpers/issues/2

As for the data, I've worked hard to build this and I will also soon release it in other languages.


Btw if you're interested in a complementing piece of code, I have a small library [1] would give you the country for a given phone number (e164), so it could be used to prefill a default country value. It's not returning ISO code but I was planning on adding such feature.

[1]: https://github.com/pdeschen/e164.js


Posted a couple issues regarding the phone field on github. Would like to use this on a current project. It's a great start and look forward to it just getting a little further down the road.


Free Twitter bootstrap magento template http://webkul.com/blog/twitter-bootstrap-magento-template/


It's really pretty cool that bootstrap has spawned such a tertiary market for addons. I knew it was the real deal when I actually paid for a theme rather than writing the css myself!


How does states work? Does it support territories outside the US?


Yes, it has the states/provinces/territories of all countries.


Add address validation using google maps api. I will love you.


I like it.. good job


Thanks! I'll add more stuff very soon.


Arrow keys don't allow moving the cursor



a good candidate for http://bootsnipp.com




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: