使用JavaScript验证时如何忽略隐藏的页面元素

Question

basically I have attending yes or no. if 'no' is selected then the drop down menus are hidden.

but when clicked submit a validation error still occurs. Is there a way to ignore hidden elements when validating ?

my page script

    1.    <SCRIPT LANGUAGE="JavaScript"'>
2.    <!--
3.   function validateForm(){
4.   if(document.colour.list1.selectedIndex==0)
5.   {
6.   alert("Please select an Item.");
7.   document.colour.list1.focus();
8.   return false;
9.   }
10.   return true;
11.   }
12.   //-->
13.  
14. 
15.</script>
16.<script type="text/javascript">
17.window.onload=registerEventHandlers;
18. function registerEventHandlers()             
19.{
20.        document.getElementById("radio1").onclick = function(){
21.                hideDiv(this,"list1")             
22.         };             
23.         document.getElementById("radio2").onclick = function(){
24.                showDiv(this,"list1")                    
25.         };                           
26. }              
27. 
28. function showDiv(targetElement,toggleElementId){                    
29. 
30.         var showAll=document.getElementsByTagName("div"),
31.             i,
32.             re = new RegExp('\\b' + toggleElementId + '\\b');
33.         for(i=0; i < showAll.length; i++){
34.           if (re.test(showAll[i].className)) {
35.               showAll[i].style.visibility="visible";
36.               showAll[i].style.display="block";
37.           }
38.        }                         
39.}            
40.function hideDiv(targetElement,toggleElementId){                
41.        var hideAll=document.getElementsByTagName("div"),
42.            i,
43.            re = new RegExp('\\b' + toggleElementId + '\\b');
44.        for(i=0; i < hideAll.length; i++){
45.            if (re.test(hideAll[i].className)) {
46.               hideAll[i].style.visibility="hidden";
47.               hideAll[i].style.display="none";
48.            }
49.        }                            
50.} 
51.</script>
52. 
53. 
54. 
55.Yes:<input type="radio" id="radio2" name="yesNo" value="yes" />
56.No:<input type="radio" id="radio1" name="yesNo" value="no"/>
57.<div class="list1" style="display: none;" >
58.        <select name="colour">
59.          <option>Please Select</option>
60.          <option>red</option>
61.            <option>orange</option>
62.            <option>blue</option>
63.        </select>
64.</div>
65.  <div class="list1" style="display: none;" >
66.<select name="shade">
67.  <option>Please Select</option>
68.  <option>dark</option>
69.    <option>light</option>
70.</select>
71.</div>

Answer 1

You just have to change your javascript code to check whether those items are hidden and skip the validation code if they are hidden. You'd have to show us how they were hidden and what your HTML is for us to offer the simplest way to detect if they are hidden.

PS You should know that hidden items will still be sent with a form submission so you may need to make sure your server knows which data is expected to be valid and which is not (because it was hidden).

Answer 2

If you the option of using jQuery, I would suggest you do. Then it's as simple as doing

if($(element).is(":visible")){

}

Of course you need to replace "element" with the element you're testing for validation.