Since responding to the other topic was reposting old messages of
mine, I've decided to try a new topic with the example and code, so
that it's less confusing.
I'l start with the basics. The premise of my form validation script
is that the validation occurs server side, and I use javascript to
post the form and interpret results from the server. These are the
basic steps:
1. User fills in form and submits.
2. Server validates field values and responds with a none if there
are no validation errors or json data describing the errors.
3. Javascipt in the browser confirms the submittal or displays error
information, depending on what the server sent back.
4. If necessary, user corrects form and resubmits.
The form isn't a true form. There isn't a form tag. For every
field that will be validated there is a corresponding span to
display any validation errors, if they are needed. The naming system
is pretty straight forward. For a form field with an id lastName
the error message span has an id lastName_error.
We'll start with a really simple form with one field, like so:
input type=text id=lastName value= /span
id=lastName_error/span
You'll want to activate the submit with a connect like this:
connect(some_submit_button, onclick, submit_handler);
We submit it with an Ajax post using this javascript code:
submit_handler = function() {
var url = /server_script_url/;
var field_list = ['lastName'];
var error_span_list = ['lastName_error'];
i = 0;
while(i error_span_list.length)
{
$(error_span_list[i]).innerHTML = ;
i++;
}
var lookup = function(field_list){
return $(field_list).value;
}
var field_values = imap(lookup,field_list);
var d_querystring = queryString(field_list,list(field_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);
}
This code also clears any error messages the page was displaying when
the form was submitted.
Next the server script goes through validation. In this example we'll
assume the field lastName isn't allowed to be blank. If the field has
some text in it the server will send back the string none. If the
field is blank the server will send back a json formatted string like
this:
{error:[{field:lastName,error_message:lastName can not be
blank.}]}
Now we need the javascript that handles the response from the server.
These will be the functions handleServerFeedback and
handleServerError. First, handleServerFeedback:
function handleServerFeedback(d_setup) {
if ((strip(d_setup.responseText)) == none)
{
// code for a successful submit
}
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++;
}
}
}
The else portion of this function goes through the json string and
puts the error messages where they belong. Next is handleServerError:
function handleServerError() {
// code for a server error
}
The nice thing about this is that to submit more fields you just
expand the list. Here's the field and error list with an additional
field:
var field_list = ['lastName','firstName'];
var error_span_list = ['lastName_error','firstName_error'];
To get the code I show above, I've cut out large portions of my own
scripts. For example, I pass the values to my submit handler, I don't
hardcode them in the function. I also display feedback to the user
about what's going on. I use ColdFusion to do my validation,
primarily the IsValid function. Between that and string functions I
can validate any data type I want. If the validation is successful
the script can go right into a database update or insert.
I hope this helps, please let me know if I fat fingered any of the
code above. Also, feel free to post questions or criticisms.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
MochiKit group.
To post to this group, send email to mochikit@googlegroups.com
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
-~--~~~~--~~--~--~---
