« [IPB 2.1] ACP Templates Part III | Main | [IPB 2.1] Friendly Forms, Again »
Monday, June 06, 2005
[IPB 2.1] Friendly Forms
This is a pretty legitimate use of javascript and ajax that doesn't take too long to implement but makes completing forms a lot easier.
Basically, javascript checks to make sure that the field is not empty and doesn't contain illegal characters. Ajax enabled browsers also fire a check to the DB to see if the input already exists in the database.
The output needs a litle cleaning up but it's a pretty nice time-saving feature that also appears on the IPB 2.1 registration pages.
(The display name feature is there because of the abstracted log in procedures IPB 2.1 allows and is optional and can be turned off by the admin. The admin can also set how many name changes are allowed per 24 hour period. Also, the name changes are tracked and the 'name change' history can be shown to other members on the profile page).
Edit: Now has a "tick" and "cross" images to visually enhance which fields are correct or incorrect.
UCP-NameChange.mov ( Quicktime .mov, 388k )
June 6, 2005 | Permalink
TrackBack
TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d83423035953ef00d8346504c569e2
Listed below are links to weblogs that reference [IPB 2.1] Friendly Forms:
Comments
Matt, I believe its better to produce the feedback to the right of the form field. A red x for example when the input is invalid with a small message that says "Name is already taken."
Posted by: | Jun 6, 2005 3:38:16 PM
Matt, I believe its better to produce the feedback to the right of the form field. A red x for example when the input is invalid with a small message that says "Name is already taken." And the primary problem with AJAX is that there is no visual "your input has been accepted." So when an input is accepted you need to do the opposite of "It has been denied" and show a green checkmark to the right of the field. This is not the only way to do this but both are required in their basic form. You need to have a visual queue it went through for the user.
Posted by: HelpingTeens.org | Jun 6, 2005 3:38:44 PM
Good! Its nice to see nice little features here and there!
Posted by: Michael | Jun 6, 2005 3:39:45 PM
I take it you didn't notice the form field go red when an error was found and go green when no errors were found?
Posted by: Matt | Jun 6, 2005 3:40:38 PM
Play it again and you'll notice that the text-input box border goes green when the input is valid.
Posted by: Phil | Jun 6, 2005 3:42:53 PM
Matt,
Merely changing the border of a text box isn't enough. I think that is more traditionally an eye-candy effect for when the form itself is ready to accept input. I admit you do have a subtle bit of "it’s done" but it just needs more. Instead of trying to rehash my own beliefs about this I’ll forward you to a well written list of objections for AJAX. Don’t get me wrong. I love the AJAX and its an incredibly cool feature, I just think it needs to be more obvious in the aforementioned areas of whether or not the input is valid/invalid.
http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html
Posted by: HelpingTeens.org | Jun 6, 2005 3:45:59 PM
Added in a tick and a cross image.
Posted by: Matt | Jun 6, 2005 4:03:19 PM
Looks great Matt! I'm just curious.. How do you specify which validation is to be done on which form field? Is it done with a php class that generates the required javascript/ajax or is this information just specified in the html template itself?
Posted by: marcele | Jun 6, 2005 4:09:39 PM
"(The display name feature is there because of the abstracted log in procedures IPB 2.1 allows and is optional and can be turned off by the admin. The admin can also set how many name changes are allowed per 24 hour period. Also, the name changes are tracked and the 'name change' history can be shown to other members on the profile page)."
Very nice. You may want to create options for allowing people to change their display name x number of times per month, though. I've seen a lot of forums where name changing gets out of control, and even with the history, it could be rather confusing.
Posted by: Jeremy Privett | Jun 6, 2005 4:12:24 PM
wow very cool matt! Nice :)
Posted by: Aaron | Jun 6, 2005 4:12:43 PM
Matt,
That is much, much better.
Posted by: HelpingTeens.org | Jun 6, 2005 4:13:10 PM
Pretty nice but aren't other things more important to develop ? The cycle release is very long (i know you are alone, i'm very aware of that) and i doubt yearly licencers are happy to download a major release + 2 fixes in a year.
Posted by: The Jedi | Jun 6, 2005 4:19:11 PM
Well, the display names is part of the log in abstraction, and adding the JS to the HTML took about 5 minutes.
Posted by: Matt | Jun 6, 2005 4:54:39 PM
Added in another field so that you can select how many days the name changes are counted. This effectively means you can set "n" changes per "n" days.
Posted by: Matt | Jun 6, 2005 5:07:22 PM
Looks good Matt. I would like to see 2.1 sooner rather than later please.
Posted by: Myr | Jun 6, 2005 5:33:20 PM
[Quote]The cycle release is very long (i know you are alone, i'm very aware of that)[/Quote]
That is not true. It is the opposite, IPB is the board with one of the fastest release cycles and not only this, but also the amount of new features in every release is surpassing the competition.
Nice implementation Matt ! It looks userfriendly like this.
Would be fine if there was an easy way (kind of api) to use the ajax check for custom modifications, so that you should just tell what kind of data is allowed, which query has to be run on which table, and were the error message should appear.
Little note for novice users:
Never rely only on any ajax check, as this does obviously not work if javascript is disabled. The ajax is only there to improve the "user-friendlyness". Ajax can never prevent sql-incejtion for example.
Posted by: mikee aka Nicoo | Jun 6, 2005 5:59:40 PM
nice but could the admin choose what colour (I am american though) the outline is? I'm color blind to red and green, blue to purple. And or group by group color. like admins can set the boarder is red and blue, and the members see black and orange.
Posted by: | Jun 6, 2005 6:12:06 PM
It's all CSS driven.
Posted by: Matt | Jun 6, 2005 6:31:47 PM
When were these checks done? ONchange? ONsubmit? I would recommend not moving the form inputs around ONchange...
Posted by: Chris Griego | Jun 6, 2005 6:40:55 PM
Onblur and onsubmit.
Posted by: Matt | Jun 6, 2005 6:50:53 PM
"Added in another field so that you can select how many days the name changes are counted. This effectively means you can set "n" changes per "n" days."
Perfect. :)
Posted by: Jeremy Privett | Jun 6, 2005 7:00:21 PM
That looks really great, Matt! Excellent job!
However, I haven't seen a blog post for that largest feature yet....
Posted by: Danny | Jun 6, 2005 9:53:53 PM
(correct if wrong) but this could acutally be that feature. or part of it.
Posted by: | Jun 6, 2005 10:12:56 PM
Matt,
Its looking good. I like what I am seeing in IPB 2.1. IMO If this is a minor version change...... What are you going to do in IPB 3? Will it make dinner for me LOL?
I am curious as to one thing. Please don't take this as complaining at all as it isn't. How much bigger is IPB 2.1 to IPB 2? I am just wondering was there a lot of code added to make this AJAX possible? I am not familiar from a programming point of view and am anxious to see how you did what you did.
Thanks!
Posted by: Louis Markham | Jun 6, 2005 11:16:16 PM
I'm tempted to call this IPB 2.5 - but that's just plain silly.
IPB 3.0 will finish off what 2.1 has started and make changes to the templating system.
Posted by: Matt | Jun 7, 2005 9:30:15 AM
The comments to this entry are closed.