Skip to main content
N
newcf
Known Participant
May 24, 2013
Question

validate with hide and show field

  • May 24, 2013
  • 2 replies
  • 3111 views

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

    This topic has been closed for replies.

    2 replies

    S
    Steve Sommers
    Legend
    May 30, 2013

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

    WolfShade
    WolfShade
    Legend
    May 30, 2013

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

    ^_^

    S
    Steve Sommers
    Legend
    May 30, 2013

    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!

    A
    Anonymous
    May 30, 2013

    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>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices