Validate--dropdown menu lists--no selection made

**acoder** · Jun 24 '08, 12:25 PM

Add an onsubmit event handler to the form:
[html]<form ... onsubmit="retur n validate()">[/html]In your validate() function, check that the selectedIndex of each is not 0. If you need only one selection, if even one has a selectedIndex not equal to 0 or value neq. 0, then return true.

**ammweb** · Jun 24 '08, 02:41 PM

Originally posted by acoder

Add an onsubmit event handler to the form:
[html]<form ... onsubmit="retur n validate()">[/html]In your validate() function, check that the selectedIndex of each is not 0. If you need only one selection, if even one has a selectedIndex not equal to 0 or value neq. 0, then return true.

I first tried one dropdown menu list and used your suggestion above, and it worked, but when I tried to added a second dropdown and use the OR operator, it didn't work. So my question is: How do you validate more than one dropdown menu list?

Below the script that didn't work using the OR:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
 <script LANGUAGE="JavaScript">
<!--
function ValidateForm(form){
ErrorText= "";
if ( form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0)
{ alert ( "Please make a selection." ); return false; }

if (ErrorText= "") 
{ form.submit() }

	}
-->
</script>

</head>

<body>
<br><form name="feedback" action="mailto:ammwebmaster@amm.org" method=post>
    <p>Your Age:    </p>
    <p>
        <select name="age"> 
            <option value="">Please Select an Option:</option> 
            <option value="0-18 years">0-18 years</option> 
            <option value="18-30 years">18-30 years</option> 
            <option value="30-45 years">30-45 years</option> 
            <option value="45-60 years">45-60 years</option> 
            <option value="60+ years">60+ years</option>
                </select>
    </p>
    <P>
    <select name="card">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    
    </select>
    <p>
        <input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
        <input type="reset" value="Reset">
        </p>
</form>
</body>

</html>

**acoder** · Jun 24 '08, 02:54 PM

There are two problems. You're not changing errorText, so checking for errorText doesn't make sense. Secondly, you're actually setting errorText in the if-statement rather than comparing. Use double-equals for comparison. Having said that, however, you don't need to check for the value of errorText, since if there's an error, you'll already have returned from the function with return false.

**ammweb** · Jun 24 '08, 05:20 PM

Originally posted by acoder

There are two problems. You're not changing errorText, so checking for errorText doesn't make sense. Secondly, you're actually setting errorText in the if-statement rather than comparing. Use double-equals for comparison. Having said that, however, you don't need to check for the value of errorText, since if there's an error, you'll already have returned from the function with return false.

I'm sorry but I don't understand! The Code below works now but there is only one drop down list. How do I get the other drop down list to be validated too. Viewer needs to have a selection from one drop down list or the other or receive an Error message--"please make your selection"

Code:

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
 <script LANGUAGE="JavaScript">
<!--
function ValidateForm(form){
if (form.age.selectedIndex == 0)
{ alert ( "Please make a selection." )
    ; return false; }
	}
-->
</script>
</head>
<body>
<br><form name="feedback" action="mailto:ammwebmaster@amm.org" method=post>
    <p>Your Age:    </p>
    <p>
        <select name="age"> 
            <option value="">Please Select an Age Option:</option> 
            <option value="0-18 years">0-18 years</option> 
            <option value="18-30 years">18-30 years</option> 
            <option value="30-45 years">30-45 years</option> 
            <option value="45-60 years">45-60 years</option> 
            <option value="60+ years">60+ years</option>
                </select>
    </p>
    <P>
   Select the QTY of cards:
    <select name="card">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <p>
        <input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
        <input type="reset" value="Reset">
        </p>
</form>
</body>
</html>

can you show me an example of the script you use?

**acoder** · Jun 24 '08, 05:50 PM

Oh, I see the error in your previous code. Change this:

Code:

if ( form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0)
{ alert ( "Please make a selection." ); return false; }

to
[code=javascript]if ((form.age.sele ctedIndex == 0 ) || (form.card.sele ctedIndex == 0))
{
alert ( "Please make a selection." );
return false;
}[/CODE]Note the extra brackets/parentheses. Also note that the language attribute of the script tag is deprecated. Use the type attribute instead:
[html]<script type="text/javascript">[/html]

**ammweb** · Jun 24 '08, 08:08 PM

Originally posted by acoder

Oh, I see the error in your previous code. Change this:

Code:

if ( form.age.selectedIndex == 0 ) || (form.card.selectedIndex == 0)
{ alert ( "Please make a selection." ); return false; }

to
[code=javascript]if ((form.age.sele ctedIndex == 0 ) || (form.card.sele ctedIndex == 0))
{
alert ( "Please make a selection." );
return false;
}[/CODE]Note the extra brackets/parentheses. Also note that the language attribute of the script tag is deprecated. Use the type attribute instead:
[html]<script type="text/javascript">[/html]

Thank YOU!
I had to put && in in place of the || but I got it to work. Code is below.
How would you get a page that had 7 dropdown menus
to be validate? So the viewer has to at least select one
dropdown before hitting the submit button??? Can you put && over and over again?

Code:

<script type="text/javascript">
<!--
function ValidateForm(form){
      if ((form.age.selectedIndex == "" ) && (form.card.selectedIndex == 0))
         {
             alert ( "Please make a selection." );
             return false;
         }
	 else 
		 {
	 	alert ("You have made your selection.");
   	   return true;
			}
		}
-->
</script>

Thanks again for all your help. I have learned a lot with this..

**acoder** · Jun 24 '08, 08:44 PM

Of course, you're checking if all of them are not selected, so it would be &&, not ||

Originally posted by ammweb

How would you get a page that had 7 dropdown menus
to be validate? So the viewer has to at least select one
dropdown before hitting the submit button??? Can you put && over and over again?

You could, but it might make more sense to use getElementsByTa gName("select") and looping over the elements, so that if you add more drop-down elements, you don't need to change the code, e.g.
[code=javascript]var selects = form.getElement sByTagName("sel ect");
var anySelected = false;
for (i = 0; i < selects.length; i++) {
if (selects[i].selectedIndex != 0) {
anySelected = true;
break;
}
}
if (!anySelected) {
// alert error
return false;
}[/code]

Validate--dropdown menu lists--no selection made

Validate--dropdown menu lists--no selection made

Comment

Comment

Comment

Comment

Comment

Comment

Comment