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 )
33 comments
Comments feed for this article
June 6, 2005 at 3:38 pm
Anonymous
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.”
June 6, 2005 at 3:38 pm
HelpingTeens.org
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.
June 6, 2005 at 3:39 pm
Michael
Good! Its nice to see nice little features here and there!
June 6, 2005 at 3:40 pm
Matt
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?
June 6, 2005 at 3:42 pm
Phil
Play it again and you’ll notice that the text-input box border goes green when the input is valid.
June 6, 2005 at 3:45 pm
HelpingTeens.org
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
June 6, 2005 at 4:03 pm
Matt
Added in a tick and a cross image.
June 6, 2005 at 4:09 pm
marcele
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?
June 6, 2005 at 4:12 pm
Jeremy Privett
“(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.
June 6, 2005 at 4:12 pm
Aaron
wow very cool matt! Nice
June 6, 2005 at 4:13 pm
HelpingTeens.org
Matt,
That is much, much better.
June 6, 2005 at 4:19 pm
The Jedi
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.
June 6, 2005 at 4:54 pm
Matt
Well, the display names is part of the log in abstraction, and adding the JS to the HTML took about 5 minutes.
June 6, 2005 at 5:07 pm
Matt
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.
June 6, 2005 at 5:33 pm
Myr
Looks good Matt. I would like to see 2.1 sooner rather than later please.
June 6, 2005 at 5:59 pm
mikee aka Nicoo
[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.
June 6, 2005 at 6:12 pm
Anonymous
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.
June 6, 2005 at 6:31 pm
Matt
It’s all CSS driven.
June 6, 2005 at 6:40 pm
Chris Griego
When were these checks done? ONchange? ONsubmit? I would recommend not moving the form inputs around ONchange…
June 6, 2005 at 6:50 pm
Matt
Onblur and onsubmit.
June 6, 2005 at 7:00 pm
Jeremy Privett
“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.
June 6, 2005 at 9:53 pm
Danny
That looks really great, Matt! Excellent job!
However, I haven’t seen a blog post for that largest feature yet….
June 6, 2005 at 10:12 pm
Anonymous
(correct if wrong) but this could acutally be that feature. or part of it.
June 6, 2005 at 11:16 pm
Louis Markham
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!
June 7, 2005 at 9:30 am
Matt
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.
June 7, 2005 at 11:26 am
Logan
Once IPB 3.0 is out, do you think that will be the last version? Not that I want it to be, but by 3.0 all the features anyone could want would already be added, and really no additional changes/features could be added? Besides bug fix releases…
June 7, 2005 at 12:03 pm
Kennedy
Woah! Wicked! I like this!
June 7, 2005 at 2:38 pm
Aaron
Matt,
Will IPB 2.1 have more detailed logs? Like more detailed admin,moderator logs etc….?
Aaron
June 7, 2005 at 3:48 pm
Cybertimber2005 and Cooldude7273
“”I’m tempted to call this IPB 2.5 - but that’s just plain silly.”"
Hmm… you’re right… it just doesn’t feel like a 2.5, but it does deserve to be named like that!
Well… your version system goes like this I believe…
x.y.z
X=Major revision
Y=Minor Revision
Z=Security/Bug revision
It is your software (Well.. your company’s) so do as YOU feel is best
I’ll approve of it
June 7, 2005 at 10:46 pm
Danny
About the naming, I think you guys should just name it 3.0 and do all the stuff you wanted to before the release.
June 8, 2005 at 9:23 am
vee
nice feature, thanks :)… stick with 2.1
June 10, 2005 at 5:08 am
Chris Griego
“I’m tempted to call this IPB 2.5 - but that’s just plain silly.”
You should call it IPB 2.6 just to mock vBulletin’s silly game. You could release 5 betas before the final version and just number them sequentially.
June 26, 2005 at 10:07 pm
Tristan
Woah! Wicked! I like this!