...

View Full Version : Form Validation and listbox separators..



erdubya
01-04-2007, 06:09 AM
Hi everybody,

I'm trying to figure out how to keep a user from accidentaly selecting the separators or instructions (Select Color) in the listbox before submitting. I'm new to JavaScript and have been looking all over for a good example but with no luck.

Here's an example:



<select name="select1" class="listBox" id="select1">
<option value="">Select Color</option>
<option value="">==========================</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="">==========================</option>
<option value="purple">purple</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
</select>


Any ideas?

Thanks for helping!

Shaffer
01-04-2007, 08:10 AM
<script type="javascript/text">
select1 = document.getElementById('select1');
if (select1 = "") {
// handle the error.
}
</script>


select1's value is the one selected. Since the options with value="" have no value, there will be an error.


Shaffer.

Ancora
01-04-2007, 12:49 PM
erdubya:

Use onchange and onsubmit to validate a form.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validate(nForm){

if (nForm['select1'].value == "")
{
alert('Please Select a Color');
return false;
}
alert('Thank you for your submission');
return true;
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:300px;margin:auto}
fieldset {width:280px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
select{font-family:times;font-size:10pt;margin-left:35px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="" onsubmit="return validate(this)">
<fieldset>
<legend>A Form</legend>

<select name="select1" class="listBox" onchange="this.value=='' ? this.selectedIndex = 0 : ''">
<option value="">Select Color</option>
<option value="">==========================</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="">==========================</option>
<option value="purple">purple</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
</select>

<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

erdubya
01-04-2007, 03:58 PM
That works perfectly.

Thanks guys!

A1ien51
01-04-2007, 04:08 PM
could you simplfy this by using <optgroup>

Eric



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum