homepage Welcome to WebmasterWorld Guest from 54.196.69.189
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
Forum Library, Charter, Moderator: open

WYSIWYG and Text Code Editors Forum

    
Validating FrontPage Forms
Advanced FrontPage Form Validation Tutorial
pageoneresults




msg:938606
 3:23 pm on Dec 12, 2005 (gmt 0)

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)" [b]language="JavaScript"[/b] 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 proceeding 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...

[edited by: pageoneresults at 11:53 am (utc) on Dec. 16, 2005]

 

Webwork




msg:938607
 8:53 pm on Dec 14, 2005 (gmt 0)

Sweet. Thanks Professor P1R.

pageoneresults




msg:938608
 9:04 pm on Dec 14, 2005 (gmt 0)

Hehehe, I was beginning to wonder where this one went. I figured it was going down into the WebmasterWorld archive without any activity. For those who are anal about validating their FP pages, this is the icing on the cake. ;)

bill




msg:938609
 8:45 am on Dec 16, 2005 (gmt 0)

nah. I just stuck a flag on it and let it lie. ;) I didn't think I could add to the quality of this one at all. Outstanding post!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / WYSIWYG and Text Code Editors
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved