Ajax Form Help (validation and tips)

[antonypeiris]

Hi Everyone,

I am very new to ajax and still learning. I am a server-side programmer so I ive forgotten most of what I use to know about things related to the client-side. Well, the complex JavaScript related stuff at least. Currently I am trying to teach myself how to get simple things done:

I have a form (that php generates through a class), and I can make it look like anything I please. Now I want to add client side validation process to it. For example:

if event = onKeyUp (for any input field) THEN
ACTION = check for validation (e.g. validate.php)

(my php scripts can take care of validation, and return a message if there is an error or nothing at all if none. I want ajax to send the field contents that the user just entered to the validate script onKeyUP)

if error THEN display a baloon tip *pop* and disable the submit button.

Then the user must correct the input and try again!

What do you guys think? I know there are frameworks that can help me to accomplish this very easily, but since im trying to learn I was wondering if someone here could push me in the right direction (to a tutorial or example code). I've done a bit of research, but still trying to get the hang of it.

Thanks a lot in advance!

Antony

EDIT: actually i think i should chance that onKeyUp to onChange right? The reason for this seems obvious.

[fahlyn]

I see its been awhile since this post...did you ever figure anything out? What you want to accomplish is definitely doable...but I'd be careful using ajax with an onKeyUp event...that means that every time the user presses a key you're going to hit your server again...that is probably going to be excessive. What I would recommend is using Prototype.js. Take a look at the documentation on that web site. I'd check out Ajax.PeriodicalUpdater here. That would probably work better than going after an onKeyUp event.

Good Luck!

[antonypeiris]

Hi,

Thank you so much for the advice, I appreciate it. I completely agree with you about the onKeyUp event (in fact, you might have missed the "EDIT" I put in there just after I posted my message, cos I realized it would mean too many requests to the server) ... as for a solution, well I didn't find exactly what I was looking for, but I designed a little js script myself based on what ive gathered from a various tutorials and implemented a way that would pop up a little message right below the field after an onChange event. This way it only validates it when the user has finished typing and moved the cursor to a new field. The only problem so far is that the last field in the form dosent get much attention since its usually the submit button after that. Know what I mean? I didn't figure out how to disable the submit button.. lol actually i forgot all about that, I just remembered after reading what I wrote.

I've heard of prototype, I will certainly give it a try. It is sort of an ajax frame work isnt it? Maybe I can look at the code and see if I can figure out how it works from the inside. Thanks again for the tip.

By the way, have you heard of ext.js ? It is also a framework, but it seems very bloated... have you ever tried it?

Thanks again and take care

[fahlyn]

prototype does supply some ajax helper classes...but not really a framework. Prototype really just adds additional functionally to the JavaScript language itself. It also provides helper classes for Strings, Arrays and Ajax. I have heard of ext.js, but I've never used it. I have used Mootools and Scriptaculous - which are JavaScript UI libraries. Yahoo also has some pretty neat JavaScript APIs.

As far as the submit button goes...what you can do is in your onBlur event or onChange (or whatever you're using) disable your submit button and change the text to "Validating..." (or whatever you want), then once your ajax callback method gets kicked off enable and change the text on your submit button. Actually, you wouldn't even need to disable the button...just check your flag when the user clicks the submit button and if that flag is set (and hasn't been reset by the ajax callback) give the user a message telling them that the form is still being validated....

you always want to be careful when using JavaScript to "turn off" submit buttons on forms....one thing to consider is, is it really worth making a separate HTTP request VIA ajax for EVERY form field...each Ajax request adds overhead to your application...so just keep performance in mind....it can make or break a web application.

[antonypeiris]

thank you again, for these excellent tips! You made me realize several important factors that I hadn't considered before. Also, I will try to apply the advice you suggested to for my problem. I greatly appreciate the help

[yannlossouarn]

Hello !

Do you know whether there's a way to feed a Mootools Tip through an Ajax request ?

Bye,
Yann

[Feral]

Actually the common way to handle username checks and password strength meeters is to us the onkeyup property. But you only call the ajax script after the user has typed an acceptable amount of characters (Say you require a password to be more then 7 characters long).
You can also check for certain key presses and check after that, for instance if the user presses the tab key.

For the majority of the form fields you don't even have to use any type of ajax call. If you want to check for a correctly formatted email address, or just check to see if a required field has been filled in the simple javascript will be more then enough, of course you will want to check these things server side also just in case javascript is turned off.

For javascript libraries I am partial to jQuery myself I find the use of it to be much more fluid the prototype or mootools.

Do you know whether there's a way to feed a Mootools Tip through an Ajax request ?

In stead of calling the tool tip function directly from the mouse over event, use the mouse over event to call your ajax script then populate the title tag (or what ever tag the tool tip script requires) and finally call the tool tip function directly from your ajax function.

This should work in principle but have never tested it in a real situation.

[Lillian]

hi, difference between Ajax & Php...?

[so1i]

hi, difference between Ajax & Php...?

Ajax isn't a language in itself, it a certain way of using Javascript on the client-side, so that basically you can run a script and retrieve data from the server, without refreshing the page.

Php is a scripting language, used just like any other programming language to carry out a task, and is run by the server.

Here are some resources:
Ajax (programming) - Wikipedia, the free encyclopedia
PHP - Wikipedia, the free encyclopedia