CGI & Forms & Validation 2

KizMar · Dec 9, 2003

I'm used to using JavaScript to validate data input when the "Submit" button is clicked, if validation checks out, I change a hidden field to "ON", and submit again to catch the VBScript / PHP function that actually builds and sends the e-mail with the form input in HTML format (so it looks nice & neat).

I'm now on a server where I have to use CGI to build and send the e-mail. Stuff like "<input type=hidden name="recipient" value="email@your.host.com">".

I can't for the life of me think of how I can encapsulate the CGI tags into some sort of function I can call when the validation is checked out.

As you may be able to tell I'm kinda new at this for validation stuff and only knew how to do it one way. This could be as easy as pie but I've never had to do it this way.

Please help!

siberian · Dec 9, 2003

There are many simple formmail scripts that will do field checking for you. Basically you write your CGI code to check the field and if it fails the check you return the user to the same page with the error noted.

I think the conceptual issue you -may- be having is that Javascript and VBScript run outside the request/response cycle, that is, they run in the browser itself.

CGI runs on the server, you must submit the form, process it and return errors.

THe question is, why can't you use your client side javascript to handle this error checking still? That should not be constrained by your ISP.

KizMar · Dec 10, 2003

Well, here's the Code I'm trying to use:

<script language="JavaScript">
// Setting focus on the first field in the form.
function setFocus() {
document.frmForm.FirstN.focus();
}

// Check that all required fields have been filled out
function Validate() {
// Make sure required fields are not blank.
if (document.frmForm.FirstN.value == '') {
alert('Please enter your First Name.');
document.frmForm.FirstN.focus();
return;
}
if (document.frmForm.LastN.value == '') {
alert('Please enter your Last Name.');
document.frmForm.LastN.focus();
return;
}
if (document.frmForm.UserN.value == '') {
alert('Please choose an Alias.');
document.frmForm.UserN.focus();
return;
}
if (document.frmForm.Address.value == '') {
alert('Please enter your Street Address.');
document.frmForm.Address.focus();
return;
}
// Make sure address at least has a space in it.
if (document.frmForm.Address.value.split(" &quot

.length < 2) {
alert('Enter a valid Street Address.');
document.frmForm.Address.focus();
return;
}
if (document.frmForm.City.value == '') {
alert('City field is not filled in.');
document.frmForm.City.focus();
return;
}
if (document.frmForm.State.value == '') {
alert('State field is not filled in.');
document.frmForm.State.focus();
return;
}
if (document.frmForm.Zip.value == '') {
alert('Zipcode field is not filled in.');
document.frmForm.Zip.focus();
return;
}
// Make sure their's at least 5 chars.
if (document.frmForm.Zip.value.length < 5) {
alert('Please enter a valid Zipcode.');
document.frmForm.Zip.focus();
return;
}
// Make sure there are the correct # of chars.
if (document.frmForm.Phone.value.length !== 12) {
alert('Enter a valid Phone Number.');
document.frmForm.Phone.focus();
return;
}
// Make sure the e-mail address is valid.
if (document.frmForm.Email.value.indexOf("@&quot

== -1) {
alert('Please enter a valid E-mail address.');
document.frmForm.Email.focus();
return;
}
// Verify that the password has enough chars.
if (document.frmForm.Password.value.length < 7) {
alert('Password must be at least seven (7) characters long.');
document.frmForm.Password.focus();
return;
}
// Make sure password matches the pass verification. If they don't, clear them.
if (document.frmForm.Password.value !== document.frmForm.PassVerify.value) {
alert('Password verification does not match.');
document.frmForm.Password.value = '';
document.frmForm.PassVerify.value = '';
document.frmForm.Password.focus();
return;
}
// Make sure the domain has at least a dot in it.
if (document.frmForm.Domain.value.indexOf(".&quot

== -1) {
alert('Please enter a valid Domain Name.');
document.frmForm.Domain.focus();
return;
}
// If everything is filled in, kick out the jams
document.frmForm.Switch.value='ON';
document.frmForm.submit()
}
</script>

<html>
<head>
<title>form50</title>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="100%" align="left" cellpadding="1" cellspacing="1">
<tr>
<td height="25" bgcolor="FFFFCC"></td>
</tr>
<tr>
<td><form name="frmForm" id="frmForm" method="POST" action="Validate()">
<table width="400" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC">
<tr>
<td colspan="5" class="RedTitle"><div align="center">Profile Setup</div></td>
</tr>
<tr>
<td colspan="5" class="SubTitle">Personal Information</td>
</tr>
<tr>
<td width="103"></td>
<td colspan="2" class="FieldHints">* First</td>
<td width="30" class="FieldHints">Middle</td>
<td width="170" class="FieldHints">* Last</td>
</tr>
<tr>
<td class="FieldTitle">Name:</td>
<td colspan="2"><input name="FirstN" id="FirstN" type="text" size="12" maxlength="30" class="TextBox">
</td>
<td><input name="MiddleN" id="MiddleN3" type="text" size="5" maxlength="15" class="TextBox"></td>
<td><input name="LastN" id="LastN3" type="text" size="12" maxlength="30" class="TextBox"></td>
</tr>
<tr>
<td class="FieldTitle">* Alias:</td>
<td colspan="4" class="FieldHints"><input name="UserN" id="UserN" type="text" size="20" maxlength="20" class="TextBox">
User Name</td>
</tr>
<tr>
<td class="FieldTitle">* Address:</td>
<td colspan="4"> <input name="Address" id="Address" type="text" size="40" maxlength="100" class="TextBox"></td>
</tr>
<tr>
<td class="FieldTitle">* City:</td>
<td colspan="4"><input type="text" name="City" id="City" class="TextBox"></td>
</tr>
<tr>
<td class="FieldTitle">* State:</td>
<td width="30"> <input name="State" id="State" type="text" size="2" maxlength="2" class="TextBox">
</td>
<td width="35" class="FieldTitle">* Zip:</td>
<td colspan="2"><input name="Zip" id="Zip" type="text" size="10" maxlength="10" class="TextBox"></td>
</tr>
<tr>
<td colspan="5" height="15"></td>
</tr>
<tr>
<td colspan="5" class="SubTitle">Contact Information</td>
</tr>
<tr>
<td class="FieldTitle">* Phone:</td>
<td colspan="4" class="FieldHints"><input name="Phone" type="text" id="Phone" value="" size="14" maxlength="14" class="TextBox">
###-###-####</td>
</tr>
<tr>
<td class="FieldTitle">Mobile:</td>
<td colspan="4" class="FieldHints"><input type="text" name="Mobile" id="Mobile" size="14" maxlength="14" class="TextBox">
###-###-####</td>
</tr>
<tr>
<td class="FieldTitle">* E-mail:</td>
<td colspan="4"><input name="Email" type="text" id="Email" size="40" maxlength="100" class="TextBox"></td>
</tr>
<tr>
<td colspan="5" height="15"></td>
</tr>
<tr>
<td colspan="5" class="SubTitle">Security Information</td>
</tr>
<tr>

</tr>
<tr>
<td colspan="5" height="15"></td>
</tr>
<tr>
<td colspan="5" class="SubTitle"></td>
</tr>
<tr>
<td class="FieldTitle"></td>
<td colspan="4"></td>
</tr>
<tr>
<td class="FieldTitle">* Domain Name:</td>
<td colspan="4"><input name="Domain" type="text" class="TextBox" id="Domain" value="" size="40" maxlength="100"></td>
</tr>
<td></td>
<td colspan="4" class="FieldHints">Example: your_domain.com</td>
<tr>
<td colspan="5" height="15"></td>
</tr>
<tr>
<td colspan="4">
<div align="center">
<input type="hidden" id="Switch" name="Switch" value="OFF">
<input type="button" name="btnSubmit" id="btnSubmit" value="Step Two" class="RedBtn" onClick="Validate()" accesskey="s">

</div></td>
<td><div align="center"><input type="reset" name="btnReset" id="btnReset" value="Reset" class="RedBtn"></div></td>
</tr>
<tr bgcolor="#999999">
<td colspan="5"><div align="center"><font color="#FFFFFF" size="2"><strong>* Indicates required fields.</strong></font></div></td>
</tr>
</table>

*******------------------------------
*******This part here is where I'm confused:
*******------------------------------
// ??? How do I use PHP and/or JavaScript to run this part of the CGI when the "Switch" vairable is "ON"... Also, if I'm using the submit button to run my JavaScript (form action is the Javascript function), how do i also tell the CGI that the form action is "/cgi-bin/FormMail.cgi" after that??? I think I'm missing some really easy way to do this.

<?php if (isset($_POST['Switch']) && ('ON' == $_POST['Switch'])) { ?>
<input method="POST" action="/cgi-bin/FormMail.cgi">
<input type=hidden name="recipient" value="myEmail@domain.net">
<input type=hidden name="email" value="<?php $_POST['Email'] ?>">
<input type=hidden name="subject" value="Test">
<? } ?>

</form>
</td>
</tr>
</table>

</body>
</html>

tviman · Dec 10, 2003

siberian is right - you do your form validation as you always have done - even if the form is CGI generated. A web page resides on the users machine, not the server, so continue to use javascript as you always have.

There's always a better way. The fun is trying to find it!

KizMar · Dec 10, 2003

I'm still not sure how to do it though. I don't understand how I can execute the following code:
"
<input type=hidden name="recipient" value="myEmail@domain.net">
<input type=hidden name="email" value="<?php $_POST['Email'] ?>">
<input type=hidden name="subject" value="Test">
"
When the "<form...>" "method="POST"" and "action="/cgi-bin/FormMail.cgi" need to be used, and I'm already using the "action" to call the "Validate()" function.

When they hit submit, right now the "action" points to the JavaScript validation function "Validate()". When the validations checks to be "OK", I turn a hidden value to "ON". The next step after that is to call a function with the code to send the e-mail. That's the part I'm not seeing. If I'm doing that part with JavaScript also, how do I use the "<form action="/cgi-bin/FormMail.cgi" method when that form already has an action that sends it to the JavaScript validation?

I'm sorry if I'm not making any sense, my eyes have been crossed for some time now on this one. =)

tviman · Dec 10, 2003

Change your form tag to read as follows:

<form name="frmForm" id="frmForm" method="POST" action="/cgi-bin/FormMail.cgi" onSubmit=return "Validate(this)">

Also, in your validate function, remove this: // If everything is filled in, kick out the jams
document.frmForm.Switch.value='ON';
document.frmForm.submit()
at the end of the function - it's no longer needed. Additionally, change the rest of the "if" statements to read return false;.

Now, when the user clicks the Submit button, the Validate(this) function is called. All of the if statements must be true in order for the FormMail.cgi script to be called.

There's always a better way. The fun is trying to find it!

KizMar · Dec 10, 2003

Now that is EXACTLY what I was looking for!!!!!!! You just saved me a LOT of time. Thank you VERY much tviman. =)

I'm able to have fun again! ;')

tviman · Dec 11, 2003

Glad to have helped...

There's always a better way. The fun is trying to find it!

KizMar · Dec 13, 2003

I had this page working at one point, but now it's skipping the validation and I can't figure out why. I've tried everything from stripping it down to one field and a submit button using exactly what you (TVIMAN) told me and it still isn't working. Can you help?

Here's the URL to the page:

http://www.ats-tech.net/form50.php

PaulTEG · Dec 13, 2003

tviman · Dec 13, 2003

KizMar... you're going to kick yourself -

Put quotation marks around your onSubmit statement:

<form name="frmSetup50" id="frmSetup50" method="POST" action="/cgi-sys/FormMail.cgi" onSubmit="return Validate(this)">

Also - are your SURE about the cgi-sys? Usually it's cgi-bin.

A helping word - when you have trouble like this, put an "alert" statement immediately before the first "if" statement. This will tell you whether if the function is being entered.

There's always a better way. The fun is trying to find it!

KizMar · Dec 14, 2003

Bah! I figured it would be something like that!!!

*kick's himself*

Again TVIMAN, thanks for your keen eye! ;')

The cgi-sys thing... that's the way our server host has it set up. Not sure why, but it works. =) My form is now operational... and I still have hair left.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CGI & Forms & Validation 2

KizMar

Technical User

siberian

Programmer

KizMar

Technical User

tviman

Programmer

KizMar

Technical User

tviman

Programmer

KizMar

Technical User

tviman

Programmer

KizMar

Technical User

PaulTEG

Technical User

tviman

Programmer

KizMar

Technical User

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CGI &amp; Forms &amp; Validation 2

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Technical User

Technical User

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor

CGI & Forms & Validation 2