validate with hide and show field

Hi,

I have the form with div to hide and show.   When i click on radio button two, enter city name then hit submit, but validation still asked for name is required from div0.

The problem is that when these fields are hidden (using display='none'), validate still looking for that field and

won't let the form submit if the fieldis is blank.Does anyone know of a way I can have it checks to see if the field is visible or hidden, and decide whether or not to let the form submit?

function show(a,b) {
document.getElementById(a).style.display = "block";
document.getElementById(b).style.display = "none";
}

function hide(a,b) {
document.getElementById(a).style.display = "none";
document.getElementById(b).style.display = "none";
}

  <cfform action="test.cfm" method="post" name="form" id="form">

      <cfinput type="radio" name="approve" value="1" onclick="show('d0','d1'); ">One<br>

       <div id="d0">

         <cfinput type="text" name="txt1" required="yes" message="Name is required.">name<br>

        </div>

     <cfinput type="radio" name="approve" value="1" onclick="show('d1','d0'); ">Two<br>

      <div id="d1"> 

         <cfinput type="text" name="txt1">city<br>

        </div>

    <cfinput type="submit" name="submit" value="Save">

  </cfform>

Thanks