Form Validation

[Lee Connell]

Are there form validation helpers in mochikit?

[Lee Connell]

anyone?

[Jason Bunting]

> Lee Connell asked:

> > Are there form validation helpers in mochikit?

No and yes - there are not any in the sense you are probably thinking, but
by virtue of the fact that MochiKit makes JavaScript suck less, there are.
Hope that makes sense.

Look through the relatively complete documentation and you will see what is
provided; MochiKit has very little in its API that is as task-specific as
"form validation helpers," instead providing generic helps.

Jason Bunting

No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.484 / Virus Database: 269.12.0/961 - Release Date: 8/19/2007
7:27 AM

[jeremiah...@gmail.com]

I ran into this a few months ago myself. I ended up writing a form
validation script that uses json data returned from the server to
either display validation errors or a submission confirmation. This
has worked out pretty well, and been fairly easy to replicate on other
forms.

On Aug 20, 7:53 am, "Jason Bunting" <thurber_min...@hotmail.com>
wrote:

[Lee Connell]

Jeremiah,

Care to share your script? You can send it to this email account.

Thanks

On Aug 21, 1:20 pm, "jeremiah.brein...@gmail.com"

> > 7:27 AM- Hide quoted text -
>
> - Show quoted text -

[jeremiah...@gmail.com]

I'll try to post a simple, working version this weekend.

[jeremiah...@gmail.com]

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.

[jeremiah...@gmail.com]

I posted my script this weekend, but it seems to have gone bye bye, so
I'll try again.

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.

[jeremiah...@gmail.com]

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() {

[jeremiah...@gmail.com]

Geez, now my 1st post shows up a day late. Anywho, ignore the first
long post, plz.

[Leo Soto M.]

Coming late to the thread, but anyway, this could be useful:
http://ui4w.sourceforge.net/UI4W/packed/doc/html/Form.html

Examples: http://ui4w.sourceforge.net/UI4W/packed/samples/Custom_Form_Validator.html
http://ui4w.sourceforge.net/UI4W/packed/samples/Simple_Manual-Layout_Form.html

It's focused on client-side validation, so doesn't directly supports
asynchronous validation.

--
Leo Soto M.