Question Validation help needed Urgent ( CodeGuru Forums Scripting Client Side )
Updated: 2008-08-12 06:09:07 (4) |
|
Validation help needed Urgent
Here's my code so far. Please disregard the div classes; I'm going to use that to format and style the form later. I can't get the validation to work right. I need to validate that there is a name, address, state, zipcode, phone number, and e-mail address. I also need to validate that the email address has 5 or more characters, the email has a period in it, and the email has at least 3 letters after the period. I want all of the alerts to pop up in one box. Also, if everything is filled out correctly, I need a message that says the form has been submitted.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style class="text/css">
function validate_form ( )
{
valid = true;
if ( document.contact_form.books.selectedIndex == 0 )
{
alert ( "Please select your book." );
valid = false;
}
if ( document.contact_form.Qyt.value == "" )
{
alert ( "Please fill in the 'Qty' box." );
valid = false;
}
if ( ( document.contact_form.newsletter[0].checked == false )
&& ( document.contact_form.newsletter[1].checked == false ) )
{
alert ( "Please indicate whether or not you want a free subscription to the
newsletter" );
valid = false;
}
if ( document.contact_form.information.selectedIndex == 0 )
{
alert ( "Please select an option from the Free Information Book List." );
valid = false;
}
if ( document.contact_form.name.value == "" )
{
alert ( "Please fill in the 'Name' box." );
valid = false;
}
if ( document.contact_form.address.value == "" )
{
alert ( "Please fill in the 'Address' box." );
valid = false;
}
if ( document.contact_form.zipcode.value == "" )
{
alert ( "Please fill in the 'ZipCode' box." );
valid = false;
}
if ( document.contact_form.state.value == "" )
{
alert ( "Please fill in the 'State' box." );
valid = false;
}
if ( document.contact_form.phone.value == "" )
{
alert ( "Please fill in the 'Phone' box." );
valid = false;
}
if ( document.contact_form.email.value == "" )
{
alert ( "Please fill in the 'Email' box." );
valid = false;
}
return valid;
}
</style>
</head>
<body>
<form name="order_form" method="post" onsubmit="return validate_form ( );">
<div class="basic">Delivery Information</div>
<div class="clear"></div>
<div class="formHoldersL">Name</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Address</div>
<div class="formHoldersR"><input name="address" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">ZipCode</div>
<div class="formHoldersR"><input name="zipcode" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">State</div>
<div class="formHoldersR"><input name="state" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Phone</div>
<div class="formHoldersR"><input name="phone" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Email</div>
<div class="formHoldersR"><input name="email" type="text" size="20" /></div>
<div class="clear"></div>
<div class="button"><input type="submit" value="Submit"/><input type="reset" /></div>
<div class="clear"></div>
</form>
</body>
</html>;
|
|
| Answers: Validation help needed Urgent ( CodeGuru Forums Scripting Client Side ) |
|
Validation help needed Urgent
You've missed the { on every single if statement. That means the function won't compile, which is why it says it's not defined.
|
|
Validation help needed Urgent
Also, don't forget if you just alert an array, it will output it separated by commas. If you loop through the array as in my example, you can use \n to put each message on a new line. This will be much more legible.
|
|
Validation help needed Urgent
Okay, I've changed a lot. However, when I try to use it, I'm told "validate_form is not defined." How do I define it? Can someone tell me what's wrong. Also, when all fields are filled in properly, I need a box to pop up and confirm the book selected and the quantity. How in the world do I do that?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Book Order Form</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
font-family:'Times New Roman', sans-serif;
font-size:16px;
color:#333333;
font-weight: bold;
}
.container {
width:500px;
background-color:#fff;
margin:10px auto;
text-align:center;
border:2px solid #CDC9A5;
overflow:hidden;
}
.basic {
display:block;
text-align:left;
background-color:#999999;
padding:2px 0px;
}
.formHoldersL:first-child {
border-top:0px;
}
.formHoldersL {
display:block;
width:188px;
float:left;
text-align:left;
padding:4px 17px;
border-top:2px solid #CDC9A5;
height:inherit;
}
.formHoldersR:first-child {
border:0px;
}
.formHoldersR {
display:block;
width:275px;
float:right;
text-align:left;
padding:0px;
border-top:2px solid #CDC9A5;
border-left:2px solid #CDC9A5;
height:inherit;
}
.clear {
clear:both;
}
.button {
border-top:2px solid #CDC9A5;
}
</style>
<script type="text/JavaScript">
function validate_form() {
var error_msg = "";
var form = document.form;
if (form.books.selectedIndex==0)
error_msg += "Please select your book.\n";
}
if (form.Qty.value=="")
error_msg += "Please fill in the 'Qty' box.\n";
}
if (form.name.value=="")
error_msg += "Please fill in the 'Name' box.\n";
}
if (form.address.value=="")
error_msg += "Please fill in the 'Address' box.\n";
}
if (form.zipcode.value=="")
error_msg += "Please fill in the 'Zip Code' box.\n";
}
if (form.state.value=="")
error_msg += "Please fill in the 'State' box.\n";
}
if (form.phone.value=="")
error_msg += "Please fill in the 'Phone' box.\n";
}
if (form.email.value=="")
error_msg += "Please fill in the 'Email' box.\n";
}
if (form.email.value.matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i) == false )
error_msg = "Please put in a properly-formatted email address.\n";
}
if (form.Qty.value.matches(/^[1-9]\d*$/) == false )
error_msg = "Please put in a quantity great than 0. \n";
}
if( error_msg != "" )
alert(error_msg);
return (error_msg == "");
}
</script>
</head>
<body>
<form method="post" action="post" onsubmit="validate_form()">
<div class="container">
<div class="basic">Online Bookstore</div>
<div class="formHoldersL">Select the book</div>
<div class="formHoldersR"><select name="books">
<option>Javascript Book</option>
<option>Java Language Book</option>
<option>VBScript Book</option>
<option>Advanced Programming in Java</option>
<option>Data Structures in C++</option>
<option>Perl and CGI</option>
</select></div>
<div class="clear"></div>
<div class="formHoldersL">Qty</div>
<div class="formHoldersR"><input name="Qty" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Do you want a free subscription to the newsletter?</div>
<div class="formHoldersR"><input name="newsletter" type="radio" value="yes" /> Yes <input name="newsletter" type="radio"
value="no" /> No
<p> </p></div>
<div class="clear"></div>
<div class="formHoldersL">Free Information Book List:</div>
<div class="formHoldersR"><select name="information" size="5">
<option>Internet Books</option>
<option>Programming Languages</option>
<option>Networking Books</option>
<option>Internet Security Books</option>
<option>Scripting Books</option>
<option>Application Design Books</option>
</select></div>
<div class="clear"></div>
<div class="basic">Delivery Information</div>
<div class="clear"></div>
<div class="formHoldersL">Name</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Address</div>
<div class="formHoldersR"><input name="address" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">ZipCode</div>
<div class="formHoldersR"><input name="zipcode" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">State</div>
<div class="formHoldersR"><input name="state" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Phone</div>
<div class="formHoldersR"><input name="phone" type="text" size="20" /></div>
<div class="clear"></div>
<div class="formHoldersL">Email</div>
<div class="formHoldersR"><input name="email" type="text" size="20" /></div>
<div class="clear"></div>
<div class="button"><input type="submit" value="Submit"/><input type="reset" /></div>
<div class="clear"></div>
</div>
</form>
</body>
</html>
Mols5
|
|
Validation help needed Urgent
Instead of using alert() in every if statement, instead, add a value to an array named problems. Then if the array is empty, you can return true, else return false. Then the alert can simply output the whole array.
Code:
function validate_form () {
var problems = [];
if (document.contact_form.books.selectedIndex == 0 ) {
problems[problems.length] = 'Book not selected';
}
if (document.contact_form.Qyt.value == "") {
problems[problems.length] = 'Quantity not chosen';
}
// put the rest of your if statements here
if (problems.length > 0) {
var message = '';
for (i = 0; i < problems.length; i++) {
message += problems[i] + "\n";
}
alert(message);
return false;
}
else {return true;}
}
Remember that all true and secure validation should come from the server-side. This form will still submit without problems if you have JavaScript disabled.
|
|
- Source:
- Previous Question: CodeGuru Forums Scripting Client Side
- Next Question: GameTrailers.com Forums Mario Kart Wii |
|
|
