Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    66
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Form Validation and listbox separators..

    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:

    Code:
                                
    <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!

  • #2
    New Coder
    Join Date
    Oct 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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.
    Last edited by Shaffer; 01-04-2007 at 08:14 AM. Reason: Forgot to get the element by id.

  • #3
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    erdubya:

    Use onchange and onsubmit to validate a form.

    Code:
    <!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>

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    66
    Thanks
    6
    Thanked 0 Times in 0 Posts
    That works perfectly.

    Thanks guys!

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    could you simplfy this by using <optgroup>

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •