Form Validation-Alert box

Question

pletch99 0 Newbie Poster

16 Years Ago

I'm having trouble validating my form for missing information. Tried many different functions but when submit the form it will reset the form or it will try to send it. I'm lost any help please. Thanks in advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Project 3</title>


<script type="text/javascript">


<!-- Hide from incompatible browsers

var ShipFirst = "";
var ShipLast = "";
var ShipEmail = "";
var ShipCompany = "";
var ShipAddress1 = "";
var ShipAddress2 = "";
var ShipCity = "";
var ShipState = "";
var ShipStateIndex = 0;
var ShipZip = "";
var ShipConfirm = 0;

function InitSaveVariables(form) {
ShipFirst = form.ShipFirst.value;
ShipLast = form.ShipLast.value;
ShipEmail = form.ShipEmail.value;
ShipCompany = form.ShipCompany.value;
ShipAddress1 = form.ShipAddress1.value;
ShipAddress2 = form.ShipAddress2.value;
ShipCity = form.ShipCity.value;
ShipZip = form.ShipZip.value;
ShipStateIndex = form.ShipState.selectedIndex;
ShipState = form.ShipState[ShipStateIndex].value;
ShipConfirm = form.ShipConfirm.checked;
}

function ShipToBillPerson(form) {
if (form.copy.checked) {
InitSaveVariables(form);
form.ShipFirst.value = form.BillFirst.value;
form.ShipLast.value = form.BillLast.value;
form.ShipEmail.value = form.BillEmail.value;
form.ShipCompany.value = form.BillCompany.value;
form.ShipAddress1.value = form.BillAddress1.value;
form.ShipAddress2.value = form.BillAddress2.value;
form.ShipCity.value = form.BillCity.value;
form.ShipZip.value = form.BillZip.value;
form.ShipState.selectedIndex = form.BillState.selectedIndex;
form.ShipConfirm.checked = form.BillConfirm.checked;
}
else {
form.ShipFirst.value = ShipFirst;
form.ShipLast.value = ShipLast;
form.ShipEmail.value = ShipEmail;
form.ShipCompany.value = ShipCompany;
form.ShipAddress1.value = ShipAddress1;
form.ShipAddress2.value = ShipAddress2;
form.ShipCity.value = ShipCity;
form.ShipZip.value = ShipZip;       
form.ShipState.selectedIndex = ShipStateIndex;
form.ShipConfirm.checked = ShipConfirm;
   }
}

function validateForm(contact)
{

if(""==document.forms.contact.shipfirst.value)
{
alert("Please enter your full name.");
return false;
}
if(""==document.forms.contact.shiplast.value)
{
alert("Please enter your last name.");
return false;
}
if(""==document.forms.contact.shipemail.value)
{
alert("Please enter your email address.");
return false;
}
if(""==document.forms.contact.shipcompany.value)
{
alert("Please enter your company name.");
return false;
}
if(""==document.forms.contact.shipaddress1.value)
{
alert("Please enter your address.");
return false;
}
if(""==document.forms.contact.shipaddress2.value)
{
alert("Please enter your address.");
return false;
}
if(""==document.forms.contact.shipcity.value)
{
alert("Please enter your city.");
return false;
}
if(""==document.forms.contact.shipzip.value)
{
alert("Please enter your zip.");
return false;
}
if(""==document.forms.contact.shipstate.value)
{
alert("Please enter your state.");
return false;
}
}


// Stop hiding from incompatible browsers -->

</script>
</head>



<body>

<center>


<form name="contact" method="post" action="" 
  onSubmit="return validateForm(contact);">



<table border="1" cellspacing="0" cellpadding="3" width="400">

<tr bgcolor="#003399">
<td colspan=2 width="100%" bgcolor="#003399">
<b><font color=white size="-1" face="arial, helvetica">Billing Information</font></b>
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">First Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="BillFirst">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Last Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="BillLast">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">E-Mail:</font>
</td>
<td>
<input type="text" size="15" name="BillEmail">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Company:</font>
</td>
<td>
<input type="text" size="25" maxlength="100" name="BillCompany">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Address:</font>
</td>
<td>
<input type="text" size="40" maxlength="35" name="BillAddress1">
</td>
</tr>
<tr>
<td>
 
</td>
<td>
<input type="text" size="40" maxlength="35" name="BillAddress2">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">City:</font>
</td>
<td>
<input type="text" size="25" maxlength="21" name="BillCity">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">State:</font>
</td> 
<td>
<select name="BillState">
<option selected>
<option value="AL">ALABAMA
<option value="AK">ALASKA
<option value="AZ">ARIZONA
<option value="AR">ARKANSAS
<option value="CA">CALIFORNIA
<option value="CO">COLORADO
<option value="CT">CONNECTICUT
<option value="DE">DELAWARE
<option value="FL">FLORIDA
<option value="GA">GEORGIA
<option value="HI">HAWAII
<option value="ID">IDAHO
<option value="IL">ILLINOIS
<option value="IN">INDIANA
<option value="IA">IOWA
<option value="KS">KANSAS
<option value="KY">KENTUCKY
<option value="LA">LOUISIANA
<option value="ME">MAINE
<option value="MD">MARYLAND
<option value="MA">MASSACHUSETTS
<option value="MI">MICHIGAN
<option value="MN">MINNESOTA
<option value="MS">MISSISSIPPI
<option value="MO">MISSOURI
<option value="MT">MONTANA
<option value="NE">NEBRASKA
<option value="NV">NEVADA
<option value="NH">NEW HAMPSHIRE
<option value="NJ">NEW JERSEY
<option value="NM">NEW MEXICO
<option value="NY">NEW YORK
<option value="NC">NORTH CAROLINA
<option value="ND">NORTH DAKOTA
<option value="OH">OHIO
<option value="OK">OKLAHOMA
<option value="OR">OREGON
<option value="PA">PENNSYLVANIA
<option value="RI">RHODE ISLAND
<option value="SC">SOUTH CAROLINA
<option value="SD">SOUTH DAKOTA
<option value="TN">TENNESSEE
<option value="TX">TEXAS
<option value="UT">UTAH
<option value="VT">VERMONT
<option value="VA">VIRGINIA
<option value="WA">WASHINGTON
<option value="DC">WASHINGTON, D.C.
<option value="WV">WEST VIRGINIA
<option value="WI">WISCONSIN
<option value="WY">WYOMING
</select>
  
<input type="text" size="10" maxlength="10" name="BillZip">
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="checkbox" name="BillConfirm" selected> <font face="arial, helvetica" size="-2">Send confirmation email via 

email</font>
</td>
</tr>


<tr bgcolor="#003399">
<td colspan=2 width="100%" bgcolor="#003399">
<b><font color=white size="-1" face="arial, helvetica">Shipping Information</font></b>
<font color=white size="-2" face="arial, helvetica">
(Check to use Billing Information: <input type="checkbox" name="copy"
OnClick="javascript:ShipToBillPerson(this.form);" value="checkbox"> )
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">First Name:</font></td>
<td>
<input type="text" size="15" maxlength="50" name="ShipFirst">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Last Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="ShipLast">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">E-Mail:</font>
</td>
<td>
<input type="text" size="15" name="ShipEmail">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Company:</font>
</td>
<td>
<input type="text" size="25" maxlength="100" name="ShipCompany">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Address:</font>
</td>
<td>
<input type="text" size="40" maxlength="35" name="ShipAddress1">
</td>
</tr>
<tr>
<td>
 
</td>
<td>
<input type="text" size="40" maxlength="35" name="ShipAddress2">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">City:</font>
</td>
<td>
<input type="text" size="25" maxlength="21" name="ShipCity">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">State:</font>
</td> 
<td>
<select name="ShipState">
<option selected>
<option value="AL">ALABAMA
<option value="AK">ALASKA
<option value="AZ">ARIZONA
<option value="AR">ARKANSAS
<option value="CA">CALIFORNIA
<option value="CO">COLORADO
<option value="CT">CONNECTICUT
<option value="DE">DELAWARE
<option value="FL">FLORIDA
<option value="GA">GEORGIA
<option value="HI">HAWAII
<option value="ID">IDAHO
<option value="IL">ILLINOIS
<option value="IN">INDIANA
<option value="IA">IOWA
<option value="KS">KANSAS
<option value="KY">KENTUCKY
<option value="LA">LOUISIANA
<option value="ME">MAINE
<option value="MD">MARYLAND
<option value="MA">MASSACHUSETTS
<option value="MI">MICHIGAN
<option value="MN">MINNESOTA
<option value="MS">MISSISSIPPI
<option value="MO">MISSOURI
<option value="MT">MONTANA
<option value="NE">NEBRASKA
<option value="NV">NEVADA
<option value="NH">NEW HAMPSHIRE
<option value="NJ">NEW JERSEY
<option value="NM">NEW MEXICO
<option value="NY">NEW YORK
<option value="NC">NORTH CAROLINA
<option value="ND">NORTH DAKOTA
<option value="OH">OHIO
<option value="OK">OKLAHOMA
<option value="OR">OREGON
<option value="PA">PENNSYLVANIA
<option value="RI">RHODE ISLAND
<option value="SC">SOUTH CAROLINA
<option value="SD">SOUTH DAKOTA
<option value="TN">TENNESSEE
<option value="TX">TEXAS
<option value="UT">UTAH
<option value="VT">VERMONT
<option value="VA">VIRGINIA
<option value="WA">WASHINGTON
<option value="DC">WASHINGTON, D.C.
<option value="WV">WEST VIRGINIA
<option value="WI">WISCONSIN
<option value="WY">WYOMING
</select>
  
<input type="text" size="10" maxlength="10" name="ShipZip">
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="checkbox" name="ShipConfirm" selected> <font face="arial, helvetica" size="-2">Send confirmation email via 

email</font>
</td>
</tr>
<tr>
<td colspan=2 align=center>

<input type="reset" value="Reset">

</td>
</tr>

<tr bgcolor="#003399">
<td colspan=2 width="100%" bgcolor="#003399">
<b><font color=white size="-1" face="arial, helvetica">Hand Tools</font></b>
</td>
</tr>

<tr>
<td width="100" valign="top" rowspan="2"><label for="item">Item Purchased</label></td>
<td valign="top" rowspan="2"><select name="item" id="item">
<option>Planes</option>
<option>Gouges</option>
<option>Hammers</option>
<option>Chisels</option>
<option>Saws</option>
<option>Screwdrivers</option>
</select>
</td>
</tr>

<tr>
<td colspan=2 align=center>


<input type="submit" value="Submit">

</td>
</tr


</table>
</form>
</center>
</body>
</html>

javascript

3 Contributors
3 Replies
316 Views
23 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by essential

Thirusha 20 Posting Whiz

16 Years Ago

U are not calling your function anywhere in the html

My suggestion would be to change the submit button to a normal button and use the onclick to call teh function like this:

<input type="button" value="Submit" name="Submit" onclick="validateForm()">

I dont see the need to pass the contact variable in to the function i dont see it being used any where

Another thing u have to swop your comparisons around like this:

if(document.forms.contact.shipfirst.value == "") 
{
alert("Please enter your full name.");
return false;
}

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

essential 84 Posting Shark Featured Poster · Answer 1 · 2008-10-02T16:58:52+00:00

Simply Insert this inside the <head> section of your page!

<script type="text/javascript">
<!--

var thisName = /^[A-Za-z]{3,50}$/

var validEmail = /^(\w+[\-\.])*\w+@(\w+\.)+[A-Za-z]+$/;

var zip = /^[0-9]{4,10}$/;
document.onsubmit = function(e)
{ e = e ? e : window.event;
  t = e.target ? e.target : e.srcElement;
 
var info = [];

  if (( t.name ) && ( t.name == 'contact' )) 
{ 
  if (!thisName.test(t.BillFirst.value && t.BillLast.value)) 
{ var mSlash = ( t.BillFirst.value.length <= 2 && t.BillLast.value.length <= 2 ) ? ' and ' : '';
  var fN = ( t.BillFirst.value.length <= 2 ) ? '"FirstName"' : '';
  var lN = ( t.BillLast.value.length <= 2 ) ? '"LastName"' : '';

info[info.length] = fN + mSlash + lN + ' must be between 3 to 50 characters long and can only contain letters.\n';  
}
if (!validEmail.test(t.BillEmail.value)) { info[info.length] = 'Please enter a valid e-mail address!\n'; }
 
if (t.BillCompany.value.length <= 1 || t.BillAddress1.value.length <= 1 || t.BillCity.value.length <= 1) { 


var fC = t.BillCompany.value.length <= 1 ? 'Invalid Company Name ~\n' : '';

var fA = t.BillAddress1.value.length <= 1 ? 'Invalid Address ~\n' : '';

var fCt = t.BillCity.value.length <= 1 ? 'Invalid City Name  ~\n' : '';

info[info.length] = 'Please enter a valid value on this field!\n' + fC + fA + fCt; }

if ( t.BillState.selectedIndex == 0 ) { info[info.length] = 'Please select a state!\n'; }

if (!zip.test(t.BillZip.value)) { 
info[info.length] = 'Please enter a valid zip code!\n'; }

} if ( info.length > 0 ) { showError(info); return false; } return true;
}

function showError(info)
{ var errorMessage = '\nThere where some problems...\n';
  for ( var er = 0; er < info.length; er++ ) { 
  var thisError = er + 1; 
  errorMessage += '\n' + thisError + '. ' + info[er]; } alert(errorMessage);
}
document.onclick = function(e) {

var f = e.target || e.relatedTarget;

if ((f.name ) && (f.name == 'copy') && (f.checked)) 
{ 
 
for ( var j = 0; j <= 6; j++) { var i = 11 + j; 
document.contact.elements[i].value = document.contact.elements[j].value; contact.ShipState.selectedIndex = contact.BillState.selectedIndex; contact.ShipZip.value = contact.BillZip.value;  } 
 }
}
//-->
</script>

essential 84 Posting Shark Featured Poster · Answer 2 · 2008-10-02T17:10:51+00:00

And dont forget to remove your old script and icluding all attached events' in your form!

<form name="contact" method="post" action=""
onSubmit="return validateForm(contact);">

<input type="checkbox" name="copy" value="checkbox"> )