For some time now I have been using javascript to validate HTML forms and Perl to process the data submitted from those forms. I generated the HTML forms using Dreamweaver and stored the forms as HTML files on the server.
I recently ran into a situation where I had to generate forms using CGI scripts and stored on the server as CGI scripts. I wanted to use javascript to validate those forms but ran into problems. I Googled around and found some pertinent stuff on this very forum. There were claims that this was impossible. Some presented examples of code that were claimed to do work, but I found them difficult to understand.
Here is some code which I wrote that works. It is written in a very verbose style so that I, and perhaps others like me, can understand it. I hope you pros will understand and forgive me for that. You could probably rewrite this as a couple of lines.
Here is the Perl code that generates the form and validates the submitted fields using javascript. The name field is required and the guests field gets all commas converted to ampersands so that the name and guests fields can be combined and sent into a csv database (not here).
#!/usr/bin/perl -w
use strict;
use CGI ':standard';
# Set the background color #rrggbb
print header;
my $color = "#ffffdd",;
print start_html(-title=>"Running javascript in Perl", -bgcolor=>$color);
print end_html;
my @y;# Compiler complained that this was absent
# I put the javascript in a variable as suggested in the following forum:
# http://www.webmasterworld.com/perl/3128782.htm
my $js = qq~
<script language="Javascript" type="text/javascript">
<!-- Hide script from old browsers
function hastext(val) {
return( val.length > 0 );
}
//Convert | and , characters to & for csv data
function fixillegal(val) {
while (val.search(/[|,]/) >= 0) {
val = val.replace(/[|,]/," &")
}
return(val);
}
// ################################################################
// All form validations are done here:
function submitme(BBRForm) {
// First check that all required fields are supplied with data
if( !hastext(BBRForm.name.value) ) {
alert( "Must supply a name." );
BBRForm.name.focus();
return(false);
}
BBRForm.name.value = fixillegal(BBRForm.name.value);
BBRForm.guests.value = fixillegal(BBRForm.guests.value); // Convert commas
// If we get to here the form should be OK.
return(true);
}
// ################################################################
// End hiding script from older browsers-->
</script>
~;# End of the javascript
# This is the path to the script servicing the submitted form.
my $path = "http://www.nbyc-cruise.com/cgi-bin/verify-form.cgi"; # Change this to the correct path!
# The lines after the next print statement are html code.
# The server will print (send) it to the browser which will interpret it.
# The code print << "TERMINATOR"; says print the following until you encounter TREMINATOR again.
# Note the use below in the html code of the function submitme(this), defined above in javascript.
# That function validates the fields in the html form and sets the focus to a field needing attention.
# This is something very nice, and easy to do in javascript.
print << "TERMINATOR";
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<HTML>
<HEAD>
<TITLE>Verify Form Inputs</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
$js
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FORM NAME="form1" METHOD="post" ACTION=$path ONSUBMIT="return(submitme(this))">
<TABLE WIDTH="528" BORDER="1"> <TR><TD WIDTH="86">Name:</TD><TD WIDTH="426"><INPUT TYPE="text" NAME="name" MAXLENGTH="30">(Required)</TD></TR><TR><TD WIDTH="86">Guests:</TD><TD WIDTH="426"><INPUT TYPE="text" NAME="guests" MAXLENGTH="50"></TD></TR>
<TR><TD WIDTH="86"> </TD><TD WIDTH="426"><INPUT TYPE="submit" NAME="Submit" VALUE="Submit"></TD></TR>
</TABLE></FORM>
</BODY>
</HTML>
TERMINATOR
Here is the Perl script that services the data submitted from the form. It just displays the data.
#!/usr/bin/perl -w
use strict;
use CGI ':standard';
print header;
print "<br>";
my $name = param('name');
my $guests = param('guests');
print "Name = $name<br>";
print "Guests = $guests<br>";
That's it. I hope this is helpful to someone.