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
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>
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.
Copy link to clipboard
Copied
jQuery is awesome; but not worth loading if all you're using it for is validation.
^_^
Copy link to clipboard
Copied
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!