Skip navigation
newcf
Currently Being Moderated

validate with hide and show field

May 25, 2013 6:14 AM

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

 
Replies
  • Currently Being Moderated
    May 30, 2013 6:12 AM   in reply to newcf

    use this

     

    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";

    }

     

     

    function control()

    {

              if(document.form.approve[0].checked == false && document.form.approve[1].checked == false)

              {

                        alert('choose selection');

                        return false;

              }

     

              if(document.form.approve[0].checked == true && document.form.txt1.value == '')

              {

                        alert('write something to txt1');

                        return false;

              }

     

              if(document.form.approve[1].checked == true && document.form.txt2.value == '')

              {

                        alert('write something to txt2');

                        return false;

              }

    }

     

     

    <cfform action="test.cfm" method="post" name="form" id="form" onsubmit="return control();">

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

           <div id="d0">

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

            </div>

     

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

          <div id="d1">

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

            </div>

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

      </cfform>

     
    |
    Mark as:
  • Currently Being Moderated
    May 30, 2013 9:17 AM   in reply to newcf

    I also HIGHLY recommend using jQuery and jQuery validation. It simplifies, and standardizes much of what you are trying to accomplish here.

     
    |
    Mark as:
  • Currently Being Moderated
    May 30, 2013 9:19 AM   in reply to Steve Sommers

    jQuery is awesome; but not worth loading if all you're using it for is validation.

     

    ^_^

     
    |
    Mark as:
  • Currently Being Moderated
    May 30, 2013 9:48 AM   in reply to WolfShade

    True, but I have found once you start using it, you'll quickly be addicted and use it for more and more. Most sites are not limited to a single 4'ish field form like this example. jQuery validation is like your first hit of crack and it's free!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points