So I'll break this into a few parts. All that is required are three
things:
1. Form inputs (actual form html not required, all we're doing is
using input to hold data for the post)
2. Javascipt (to package and send the post, and to interpret the
response from the server)
3. Server script (to respond to the post I use ColdFusion, but
anything will do)
Here's a really simple form:
<span class="Form_Item_Field"><input type="text" id="lastName"
name="lastName" size="25" value="" /></span>
<span id="lastName_error" name="lastName_error"></span>
So we send the form data like this: (This also clears the error field
above. The nice thing is that to send more id values you just expand
the key_array variable)
var key_array = ['lastName'];
var error_array = [lastName_error'];
var submit_maker = function(key_array,error_array) {
submit_handler = function() {
i = 0;
while(i < error_array.length)
{
$(error_array[i]).innerHTML = "";
i++;
}
var lookup = function(key_array){
return $(key_array).value;
}
var key_values = imap(lookup,key_array);
var d_querystring = queryString(key_array,list(key_values));
var d_setup = getXMLHttpRequest();
d_setup.open( "POST", url, true);
d_setup.setRequestHeader('Content-Type',
'application/x-www-form-
urlencoded');
d_setup.setRequestHeader('Cache-Control', 'no-cache');
var d = sendXMLHttpRequest( d_setup, d_querystring);
d.addCallbacks(handleServerFeedback,handleServerError);
}
return submit_handler;
}
Now that we've sent the post the server script will actually do the
form validation. If the form data validates the server sends back the
text "none". If the form data doesn't validate correctly the server
sends back json data describing the problem. Let's say lastName isn't
allowed to be blank. If you send it blank the server can send back
the string: (the error message is json formatted)
{"error":[{"field":"lastName","error_message":"lastName can not be
blank."}]}
So now we need javascript to handle the server response. That happens
in the handleServerFeedback function in the callback. Here she be:
function handleServerFeedback(d_setup) {
if ((strip(d_setup.responseText)) == "none")
{
// code for success goes here
}
else
{
error_obj = evalJSONRequest(d_setup);
error_array = error_obj['error'];
i = 0;
while(i < error_array.length)
{
error_id = error_array[i].field + "_error";
$(error_id).innerHTML = error_array[i].error_message;
i++;
}
}
}
This code displays the error message in the correct span or div. The
error div for lastName is assumed to be lastName_error. I keep it
simple. The other callback you'll need is for server errors. It can
look like this:
function handleServerError() {
// code for error goes here
}
So I've really stripped down my code for this example. I can't
promise that everything will work perfectly. Also, I didn't even
touch on how to get the server script you use to validate the form
info you send. That one is all yours ;-) I can tell you that I
primarily use ColdFusion's IsValid function and length properties to
do my own. Let me know if you have any questions or need more
assistance.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
