pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
 |
Validating FrontPage Forms - The Solution - 12/16/2005 6:53:49
This one is for Advanced FrontPage users.
One of the things that has always bugged me is that FrontPage's form validation script call is not valid HTML. It contains a language="JavaScript" attribute which is deprecated in favor of type="text/javascript". Here's an example of a standard FP form tag that has a validation call in it...
<form method="post" action="confirmation.asp" onsubmit="return FrontPage_Form1_Validator(this)" language="JavaScript" name="FrontPage_Form1">
Unfortunately you cannot replace the language attribute with the type attribute as the validator will throw an error at you.
After years of dealing with the one error on my forms, I have now found a way to correct that error and make my forms HTML 4.01 Strict and XHTML 1.0 Strict.
Step 1 - Building your Form and Validation Routine
Build your form in FrontPage. Assign validation to the fields that require it. Be sure to carefully choose the validation that best fits each field. For fields that contain numbers, you should set constraints to only allow numbers. There is much that can be done using FP's built in validation scripts.
Before proceding to Step 2, be sure that your form validation is exactly how you want it. You don't want to have to do this again if you don't have to. ;)
Step 2 - Creating the External JavaScript File
View the source of your form at the browser level (after it has been sent from the server). You will now see a FrontPage script tag (this is generated by the FP Server Extensions) along with a function tag that has the FrontPage_Form1_Validator(theForm) statement...
<script Language="JavaScript" Type="text/javascript"><!--
function FrontPage_Form1_Validator(theForm)
{...
Copy everything between the first function and ending }. Example...
function FrontPage_Form1_Validator(theForm)
{
if (theForm.ContactName.value == "")
{
alert("Please enter a value for the \"Contact Name\" field.");
theForm.ContactName.focus();
return (false);
}
if (theForm.ContactName.value.length < 2)
{
alert("Please enter at least 2 characters in the \"Contact Name\" field.");
theForm.ContactName.focus();
return (false);
}
if (theForm.ContactName.value.length > 100)
{
alert("Please enter at most 100 characters in the \"Contact Name\" field.");
theForm.ContactName.focus();
return (false);
}
if (theForm.EMail.value == "")
{
alert("Please enter a value for the \"E-mail\" field.");
theForm.EMail.focus();
return (false);
}
if (theForm.EMail.value.length < 2)
{
alert("Please enter at least 2 characters in the \"E-mail\" field.");
theForm.EMail.focus();
return (false);
}
if (theForm.EMail.value.length > 100)
{
alert("Please enter at most 100 characters in the \"E-mail\" field.");
theForm.EMail.focus();
return (false);
}
if (theForm.Comments.value == "")
{
alert("Please enter a value for the \"Comments\" field.");
theForm.Comments.focus();
return (false);
}
if (theForm.Comments.value.length < 2)
{
alert("Please enter at least 2 characters in the \"Comments\" field.");
theForm.Comments.focus();
return (false);
}
if (theForm.Comments.value.length > 1000)
{
alert("Please enter at most 1000 characters in the \"Comments\" field.");
theForm.Comments.focus();
return (false);
}
return (true);
}
Paste that into a text file. Take the first function and eliminate the FrontPage_Form1_ part...
Take this... function FrontPage_Form1_Validator(theForm)
And change to this... function Validator(theForm)
...and save it as contact.js. Upload it to your webs /js/ folder (or wherever you store your JavaScript files). Now, create the external file reference for the page that contains the form. Place that reference in the <head></head> section of the form...
<script type="text/javascript" src="/js/contact.js"></script>
Step 3 - Changes to the Form
Go back to your form and take these additional steps...
1. Change the form tag and elminate these items; FrontPage_Form1_, language="JavaScript" and name="FrontPage_Form1". So, what once looked like this...
<form method="post" action="confirmation.asp" onsubmit="return FrontPage_Form1_Validator(this)" language="JavaScript" name="FrontPage_Form1">
Now looks like this...
<form method="post" action="confirmation.asp" onsubmit="return Validator(this)">
2. The next thing you will do is eliminate all of the validation <webbot>s from the elements on the form. I do this by viewing HTML source and just cutting them from the source. You can also go through the process in Normal View by double clicking each field and removing validation. Be sure to get every single one of those <webbot>s out of the code before saving the page and uploading it. If any of those <webbot>s remain, FrontPage will overwrite your form tag changes and revert back to the original FP generated form tag.
Note: FrontPage forms function through the <webbot> tags. Once FP sees one of those tags on a web page that is hosted on a server with FrontPage Extensions, it automatically performs the function of that <webbot> and can do any number of things to the page (good things). In this instance of validation, it generates the JavaScript that is used to validate the form fields. That is what we copied and pasted into the external JavaScript file above.
That should do it based on the few that I've completed so far. Since I'm not experienced with JavaScript, I may be missing a few options above and I'm hoping other members with more experience will point out any potential issues.
This whole validation of forms has been on my list of todos for over 4 years. After working on a recent project where we used an FP validation script on a form and had to change the way it functioned, I learned how to make my FP forms validate. :)
P.S. This also removes all FrontPage identification from the form. I like being able to do this so the "geeks" viewing my source think that it was all hand coded and not produced by FrontPage. Coding geeks have this thing about FrontPage HTML. If they don't see it though...
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
|
Printable Version 
New Messages
No New Messages
Hot Topic w/ New Messages
Hot Topic w/o New Messages
Locked w/ New Messages
Locked w/o New Messages
Post New Thread