• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

validate with hide and show field

New Here ,
May 24, 2013 May 24, 2013

Copy link to clipboard

Copied

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

Views

2.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 30, 2013 May 30, 2013

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
May 30, 2013 May 30, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 30, 2013 May 30, 2013

Copy link to clipboard

Copied

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

^_^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
May 30, 2013 May 30, 2013

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation