Validate script to check to make sure drop downs have been selected 1

[ctenicki]

I was wondering if its possible to run a validator script from an "onclick" action that would check to make sure that all drop down menus(or select boxes) have been selected. However, I need to do this check based on the SELECT attribute and not the name attribute since each name for the select boxes are generated dynamically from the XSL. So basically i need to run a check to make sure that all drop down menus have been selected no matter how many are generated and not by using (form.SelectBoxName.value == "&quot since the names are dynamic.
I hope this makes sense. Thanks for your help.

 

[tlhawkins]

Hey ctenicki,

This should work for you...

<script language = &quot;JavaScript&quot;>
function validate()
{
  for (var y = 0; y < document.forms.length; y++)
  {
    for (var x =0; x < document.forms[y].elements.length; x++)
    {
      if (document.forms[0].elements[x].type == 'select-one')
      {
        fieldname = document.forms[y].elements[x].name;
        selname = &quot;document.forms[y].&quot; + fieldname + &quot;.selectedIndex;&quot;;
        selval = eval(selname);
        if (selval < 0)
	    {
	      alert(&quot;You must Pick one&quot;);
        }
	  }	
	}  	
  }
}
</script>

I tested it with IE5 and NS6.
Just call it from an Onclick like this:

<input type=&quot;button&quot; name=&quot;clickme&quot; value=&quot;clickme&quot; OnClick=&quot;validate()&quot;>

it will loop through every form on the page and then look for select boxes. When it finds a select box it will check that something is selected if not it pops up a generic error message. You can of course change it to tell the name of the form/field that is not selected.

have fun... let me know if you need any help getting it to work with your page.

 

[xutopia]

I give a star to tlhawkins for his code and provide a slight correction :

if (document.forms[0].elements[x].type == 'select-one')

should be replaced by :

if (document.forms[y].elements[x].type == 'select-one')

Hope this helps. Gary

http://www.xutopia.com

Haran

 

[tlhawkins]

Thanks xutopia,

I missed that. I would also like to say that this code will only work if your select boxes are single selections. If you are using any multiple select boxes then change this line:

if (document.forms[0].elements[x].type == 'select-one')

to:

if ((document.forms[y].elements[x].type == 'select-one') || (document.forms[y].elements[x].type == 'select-multiple' ))

It should now work with both single and multiple select boxes.

Thanks again for catching my array reference error.

Have fun...

 

[xutopia]

I believe that this forum is great because we get to have other people look at our code and improve it, fix it and correct any mistakes. Sometimes we can suggest another way of doing something like this line right here :

if (document.forms[y].elements[x].type.indexOf('sel') != -1)

works for both types of select boxes. Gary

http://www.xutopia.com

Haran

 

[ctenicki]

I appreciate all your help with this one. However, I implemented the javascript as listed above and my page will still submit without checking the values of the select boxes. The code....

<SCRIPT>
<!-- hide script from old browsers
function validate(form) {
{
for (var y = 0; y < document.forms.length; y++)
{
for (var x =0; x < document.forms[y].elements.length; x++)
{
if (document.forms[y].elements[x].type == 'Select an item')
{
fieldname = document.forms[y].elements[x].name;
selname = &quot;document.forms[y].&quot; + fieldname + &quot;.selectedIndex;&quot;;
selval = eval(selname);
if (selval < 0)
{
alert(&quot;##############################&quot;
}
}
}
}
}
}
</SCRIPT>

<INPUT type=&quot;submit&quot; value=&quot;Submit&quot; ONCLICK=&quot;validate()&quot; name=&quot;Submit&quot;>



Any ideas. Thanks again for your assistance.

 

[tlhawkins]

hey,

you changed one line that you weren't suppose to:

if (document.forms[y].elements[x].type == 'Select an item')

That wont work, the types are not variable. Use what Xutopia last posted. I was trying to think of the syntax for that and I gave up . Thanks again...

so replace with this line:

if (document.forms[y].elements[x].type.indexOf('sel') != -1)

 

[ctenicki]

in the above code, is the ('sel') just the value of a non-selected dropdown menu. So it would be replaced with ('Select an item') if within the SELECT box code the default option is....
<SELECT name=&quot;SelectBox1&quot;>
<OPTION value=&quot;Select an item&quot;>Select an item</OPTION>

 

[ctenicki]

xutopia & tlhawkins,

Sorry to bother you again regarding this, but is it possible that this might not work in IE 5.5.
I am still able to submit without hitting the validator
Thanks again


this is what i have so far....


<HTML>
<HEAD>
<LINK TITLE=&quot;CompactStyle&quot; HREF=&quot;../wds/wds.css&quot; REL=&quot;stylesheet&quot;>
<META NAME=&quot;GENERATOR&quot; CONTENT=&quot;WebLogic htmlKona 4.5.1 09/30/1999 17:41:18 #53704&quot;>
</HEAD>
<BODY bgcolor =&quot;004466&quot;>

<FORM TARGET=&quot;wd&quot; ACTION=&quot;pmticket_form_handler&quot; METHOD=&quot;POST&quot;>
<TABLE><TR>
<TD colspan=&quot;3&quot;>


<script language = &quot;JavaScript&quot;>
function validate()
{
for (var y = 0; y < document.forms.length; y++)
{
for (var x =0; x < document.forms[y].elements.length; x++)
{
if (document.forms[y].elements[x].type == 'Select an item')
{
fieldname = document.forms[y].elements[x].name;
selname = &quot;document.forms[y].&quot; + fieldname + &quot;.selectedIndex;&quot;;
selval = eval(selname);
if (selval < 0)
{
alert(&quot;$$$$$$$$$$$$Testing$$$$$$$$$$$$$&quot;
}
}
}
}
}
</script>


<TD><SELECT name=&quot;testDrop&quot;>
<OPTION value=&quot;Select an item&quot;>Select an item</OPTION>
<OPTION value=&quot;Acceptable&quot;>Acceptable</OPTION>
<OPTION value=&quot;Repair&quot;>Repair</OPTION>
<OPTION value=&quot;Replace&quot;>Replace</OPTION>
<OPTION value=&quot;Unacceptable&quot;>Unacceptable</OPTION>
</SELECT></TD>

<TD>
<INPUT type=&quot;submit&quot; value=&quot;Submit&quot; ONCLICK=&quot;validate() name=&quot;Submit&quot;>


</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

 

[tlhawkins]

hey ctenicki,

Sorry it took so long to get back to you. I've been away all day. But here is the deal, I'm re-posting the entire code that you posted with notes so you can understand why those lines are the way they are:

<HTML>
<HEAD>
<LINK TITLE=&quot;CompactStyle&quot; HREF=&quot;../wds/wds.css&quot; REL=&quot;stylesheet&quot;>
<META NAME=&quot;GENERATOR&quot; CONTENT=&quot;WebLogic htmlKona 4.5.1 09/30/1999 17:41:18 #53704&quot;>
<script language = &quot;JavaScript&quot;>
function validate()
{
  // This loops through every form on your page. 
  // most pages only have one form but just in case it checks all of them
  // document.forms.length holds the number of forms that are on a page
  // starting with 0 .
  for (var y = 0; y < document.forms.length; y++)
  {
    // This loops through every form field in the current form.
	// document.forms[y].elements.length holds the number of fields in form # y
    for (var x =0; x < document.forms[y].elements.length; x++)
    {
	  // this checks to see what type of field we are looking at.
	  // document.forms[y].elements[x].type holds the type.  
	  // 'select-one' is a select box that you cannot select multiple.
	  // 'select-multiple' is a select box that you can select multiple.
	  // so document.forms[y].elements[x].type.indexOf('sel') is looking 
	  // for any type that has the sub-string 'sel' in it.  This will catch both 
	  // kinds of select box but will not catch a 'button' or any other kind of input
	  // if the current field we are looking at does not have 'sel' in it then
	  // indexOf('sel') will return -1.  So we check for the negative of that or != -1.
      if (document.forms[y].elements[x].type.indexOf('sel') != -1)
      {
	    //  document.forms[y].elements[x].name holds the actual name of the form field 
		//  this will be the name that is dynamically generated in your code.
        fieldname = document.forms[y].elements[x].name;
		
		// documents.forms[y].fieldname.selectedIndex holds a -1 if there is nothing selected
		// so first we create the string then we evaluate it then we check it's value.
        selname = &quot;document.forms[y].&quot; + fieldname + &quot;.selectedIndex;&quot;;	
        selval = eval(selname);
		// if it is in fact less then 0 then we do what we need to do to let the user know
		// that they did not make a selection.
		// also see notes by your <SELECT> tag.  This needed to be changed to &quot;1&quot; because 
		// your select box was of size &quot;1&quot;
        if (selval < 1)
        {
          alert(&quot;$$$$$$$$$$$$Testing$$$$$$$$$$$$$&quot;);
		  // in order to keep the submit from going through we must return false.		  
		  return false;
        }
      }
    }
  }
  return true;
}
</script>
</HEAD>
<BODY bgcolor =&quot;004466&quot;>

<!-- be sure to name your form -->
<!-- if you want this to interrupt your submission then put it in here as an onSubmit
     Otherwise a person could hit enter and it would submit without validating -->
<FORM NAME = &quot;test&quot; TARGET=&quot;wd&quot; ACTION=&quot;pmticket_form_handler&quot; METHOD=&quot;POST&quot; OnSubmit = &quot;return validate()&quot;>
<TABLE><TR>
<TD colspan=&quot;3&quot;>
<!--  with a select box of size 1 which is default, the first choice is automatically selected
      which makes the validate function call it selected. So I changed it in the validate, but 
	  if you ever change this to a select box of size 2 or greater then change the validate back
	  to &quot;if (selval < 0)&quot;.  This will work fine just as it is as long as your first selection is always a &quot;select an item&quot; type message.  -->
<TD><SELECT name=&quot;testDrop&quot;>
<OPTION value=&quot;Select an item&quot;>Select an item</OPTION>
<OPTION value=&quot;Acceptable&quot;>Acceptable</OPTION>
<OPTION value=&quot;Repair&quot;>Repair</OPTION>
<OPTION value=&quot;Replace&quot;>Replace</OPTION>
<OPTION value=&quot;Unacceptable&quot;>Unacceptable</OPTION>
</SELECT></TD>
<TD>
<!-- Notice this is changed to onSubmit in the <form> tag, if you actually need it to be onClick for some reason
     Let me know and I'll re-work it for you but it wont work as well. --> 
<INPUT type=&quot;submit&quot; value=&quot;Submit&quot;>
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Please try this code just as it is. It will work, then read the comments so you will know what you can change and what you can't.

I hope this answers your question.

 

[sbayter]

Hi,
I have a form with a lot of radio buttons.
It is a form with 10 questions and for each question you can answer from 1 to 10 with radio button(so there are like 40 buttons).
I want the user to check at least one of each question.
Would this code above work with this?>
Thanks.

sbayter