Search jQuery

jQuery Forum

joern.zae..

Themerolled forms with validation plugin

in Developing jQuery UI • 2 years ago

A first draft: <a href="http://bassistance-plugins.googlecode.com/svn/trunk/plugins/validate/demo/themerollered.html">http://bassistance-plugins.googlecode.com/svn/trunk/plugins/validate/demo/themerollered.html</a>
Thanks to Todd for making the initial suggestion. It uses jQuery UI CSS framework classes and the button widget for the submit buttons. I tried to apply it also for the checkboxes - that doesn't really work currently. I'd have to apply .buttons() to each paragraph that holds a checkbox, but that pretty much screws up the layout (and needs adjustments on the validation side to fix the error labels): <a href="http://bassistance-plugins.googlecode.com/svn/trunk/plugins/validate/demo/themerollered-checkboxed.html">http://bassistance-plugins.googlecode.com/svn/trunk/plugins/validate/demo/themerollered-checkboxed.html</a>
Also in a form like that, its not at all obvious that the checkbox is actually a checkbox, and not just a button that triggers something else.
Soo, in summary: CSS framework FTW, base button too, checkbox button not so much.
Suggestions?
Jörn

Replies(3)

rdworth

Re: Themerolled forms with validation plugin

2 years ago

This looks great. The legends could use a little padding, the fieldset and legends could use some rounded corners. Great work!
When we talked about using checkboxes as an html source for toggle buttons and radios as an html source for toggle sets, I remember discussing that it wouldn't really be a suitable replacement for actual checkboxes and radio buttons. In that case you want actual styled checkboxes and radios. It's only suitable if what you're presenting should look like a button.
I know Filament Group has done some work on creating super cool styled form elements. Any work yet on making those themable?
- Richard

joern.zae..

Re: Themerolled forms with validation plugin

2 years ago

Removed the checkbox variant for now.
Also improved the main demo to use rounded corners, a button-type-submit instead of input-type-submit, and some more padding for the legends.
Trontastic looks great, if you like it dark :-)
Jörn

guest

Re: Themerolled forms with validation plugin

2 years ago

<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">This is looking really good. This is sort of outside the scope of the form validation plugin, but if you styled the legend for each fieldset to look more like a full width header for the fieldset (pretty much like an open accordion) it might look slicker.<div>
</div><div>Showing an error state for radio buttons and check boxes is tricky since they can't be styled. If you want to use native controls, the only real option is to style the labels with the error class so you have something to visually flip. The technique on our site for styling checks and radios currently uses the label positioned over the native element with a bg image for the custom check or radion. If we injected a span or two, we could build TheemRoller-ready custom elements that still use the native elements.</div><div>
</div><div>There is a lot of work to be done with forms and TR. Hopefully, we can tackle a big static of all the common form elements in TR format with various states - error, disabled, etc. Maybe in Jan/Feb?</div><div>
</div><div>_t</div><div>
<div><div>On Dec 5, 2009, at Dec 5, 2009 |12:35 PM, Jörn Zaefferer wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">Removed the checkbox variant for now.
Also improved the main demo to use rounded corners, a button-type-submit instead of input-type-submit, and some more padding for the legends.
Trontastic looks great, if you like it dark :-)
Jörn

Top Reply

Response title

Attachments

jQuery Forum

Themerolled forms with validation plugin

Replies(3)

Re: Themerolled forms with validation plugin

Re: Themerolled forms with validation plugin

Re: Themerolled forms with validation plugin

Statistics

Tags

Actions

Related Posts