> > However, I generally tend to view the actual functioning of a form as
> > being on the code side of the code and design divide.
>
> If I decide to take control of the form (restrict a designer from making
> changes), what is the best method to implement the validation?
I use verify.js function from the javascript in a nutshell book. Seems to
work quite well.
I then use CGI::ArgChecker in the perl. Verify.js only checks for the
existence or not of a paramiter, but that's good enough for me. I'm sure it
wouldn't be too hard for a javascript guru to stick some more info on it.
verify.js should be attached, as is an example.
I'm sure though with a bit of thought and a lot more experience, I'd manage
to weave CGI.PM, CGI::ArgChecker, HTML::Template and verify.js together to
do some automagical tricks.
// A utility function that returns true if a string contains only
// whitespace characters.
function isblank(s)
{
for(var i = 0; i < s.length; i++) {
var c = s.charAt(i);
if ((c != ' ') && (c != '\n') && (c != '\t')) return false;
}
return true;
}
// This is the function that performs form verification. It will be invoked
// from the onSubmit() event handler. The handler should return whatever
// value this function returns.
function verify(f)
{
var msg;
var empty_fields = "";
var errors = "";
// Loop through the elements of the form, looking for all
// text and textarea elements that don't have an "optional" property
// defined. Then, check for fields that are empty and make a list of
them.
// Also, if any of these elements have a "min" or a "max" property
defined,
// then verify that they are numbers and that they are in the right
range.
// Put together error messages for fields that are wrong.
for(var i = 0; i < f.length; i++) {
var e = f.elements[i];
if (((e.type == "password") || (e.type == "text") || (e.type ==
"textarea")) && !e.optional) {
// first check if the field is empty
if ((e.value == null) || (e.value == "") || isblank(e.value)) {
empty_fields += "\n " + e.name;
continue;
}
// Now check for fields that are supposed to be numeric.
if (e.numeric || (e.min != null) || (e.max != null))
var v = parseFloat(e.value);
if (isNaN(v) ||
((e.min != null) && (v < e.min)) ||
((e.max != null) && (v > e.max))) {
errors += "- The field " + e.name + " must be a number";
if (e.min != null)
errors += " that is greater than " + e.min;
if (e.max != null && e.min != null)
errors += " and less than " + e.max;
else if (e.max != null)
errors += " that is less than " + e.max;
errors += ".\n";
}
}
}
}
// Now, if there were any errors, display the messages, and
// return false to prevent the form from being submitted.
// Otherwise return true.
if (!empty_fields && !errors) return true;
msg = "______________________________________________________\n\n"
msg += "The form was not submitted because of the following
error(s).\n";
msg += "Please correct these error(s) and re-submit.\n";
msg += "______________________________________________________\n\n"
if (empty_fields) {
msg += "- The following required field(s) are empty:"
+ empty_fields + "\n";
if (errors) msg += "\n";
}
msg += errors;
alert(msg);
return false;
}
Usage example
[header blerbe]
<script language="JavaScript" src="/verify.js"></script>
[body of the docuemtn]
[start the form ]
<form method="post" action="main.plx"
enctype="application/x-www-form-urlencoded"
[define the optional paramiters. These names are the names of the input
tags.]
onsubmit="
this.description.optional=true;
this.pb_message.optional=true;
this.address.optional=true;
this.telephone.optional=true;
this.additional_info_req.optional=true;
if (verify(this)) {
return true;
}
else {
return false;
};
" name="newresource">
[the rest of your form here. ]
</form>
[and the rest of your document]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
