4 Replies Latest reply: May 30, 2013 9:48 AM by Steve Sommers RSS

    validate with hide and show field

    newcf Community Member

      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

        • 1. Re: validate with hide and show field
          yunusozay

          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>

          • 2. Re: validate with hide and show field
            Steve Sommers Community Member

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

            • 3. Re: validate with hide and show field
              WolfShade Community Member

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

               

              ^_^

              • 4. Re: validate with hide and show field
                Steve Sommers Community Member

                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!