| | |
Form Validation-Alert box
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Sep 2008
Posts: 4
Reputation:
Solved Threads: 0
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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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>
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:
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:
My suggestion would be to change the submit button to a normal button and use the onclick to call teh function like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
if(document.forms.contact.shipfirst.value == "") { alert("Please enter your full name."); return false; }
Simply Insert this inside the
<head> section of your page! javascript Syntax (Toggle Plain Text)
<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>
![]() |
Similar Threads
- Confirmation message (JavaScript / DHTML / AJAX)
- html/php form for .htaccess validation (PHP)
- Help on form validation requested. (PHP)
- Form Validation Issues (JavaScript / DHTML / AJAX)
- Javascript alert not working (JavaScript / DHTML / AJAX)
- for validation - text box and drop down menu (JavaScript / DHTML / AJAX)
- Trim Strings (JavaScript / DHTML / AJAX)
- form validation not working (JavaScript / DHTML / AJAX)
- ASP.NET: Problems with CustomValidator... (ASP.NET)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: non-functioning Function - HELP!
- Next Thread: JS page refresh in FF
Views: 1553 | Replies: 3
| Thread Tools | Search this Thread |
Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captchaformproblem checkbox child class close codes date debugger dependent developer disablefirebug dom editor element embed engine events explorer ext file flash form forms game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe internet java javascript javascripthelp2020 jquery jsf jsfile jump libcurl maps margin marquee masterpage math matrixcaptcha media mysql object onerror onmouseoutdivproblem onreadystatechange parent passing paypal pdf php player position post programming rated redirect runtime safari scriptlets scroll search security session shopping size software solutions sources star stars stretch synchronous toggle tweet unicode variables web webkit webservice window wysiwyg \n





