Preventing form validation on hidden text boxes

[Tigger]

I am trying to adapt a current feedback form so that depending on
which radio button is selected, depends on how many text fields are
visible / useable.

By this I mean that there are title, name and address text boxes etc
for 1 applicant when first viewing the page, with the '1 applicant'
radio button selected. If the radio button for '2 applicants' is then
selected, duplicate title, name and address text boxes appear / become
useable. I can hide the text boxes as required, but can't stop the validation
on them.

Can you provide help on what exactly to type into the script and the
body of the page? A detailed response would be most appreciated as I
am still fairly new to Javascript so need as much info as possible ;o)

function ValidateForm(){
var at_pos;
var pd_pos;
var sp_pos;
var em_len;

if (document.form.title.value.length==0)
{
alert("Please enter your title");
document.form.title.focus();
return;
}
if (document.form.firstname.value.length==0)
{
alert("Please enter your first name");
document.form.firstname.focus();
return;
}

if (document.form.title2.value.length==0)
{
alert("Please enter your title (2nd applicant)");
document.form.title2.focus();
return;
}
if (document.form.firstname2.value.length==0)
{
alert("Please enter your first name (2nd applicant)");
document.form.firstname2.focus();
return;
}
else
{
document.form.submit();
}
}

<form action="new.asp" method="post" name="form">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="25%" align="left" valign="top">
<p>Title</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="title" size="10" maxlength="20">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="firstname" size="35" maxlength="30">
</td>
</tr>
<tr>
<td colspan="2">visible<input type="radio" name="r1" id="new"
value="" checked>
hidden<input type="radio" name="r1" id="new" value="">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>Title2</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="title2" size="10" maxlength="20">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name2</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="firstname2" size="35" maxlength="30">
</td>
</tr>
</table>
</form>


Many thanks

[Fang]

Try this:

function ValidateForm(){
var at_pos;
var pd_pos;
var sp_pos;
var em_len;

if (document.form.title.value.length==0)
{
alert("Please enter your title");
document.form.title.focus();
return;
}
if (document.form.firstname.value.length==0)
{
alert("Please enter your first name");
document.form.firstname.focus();
return;
}
//Only validate if 2nd applicant visible
if(document.getElementById('title2').style.display=="block") {
if (document.form.title2.value.length==0)
{
alert("Please enter your title (2nd applicant)");
document.form.title2.focus();
return;
}
if (document.form.firstname2.value.length==0)
{
alert("Please enter your first name (2nd applicant)");
document.form.firstname2.focus();
return;
}
}
// Submit if all values are correct
document.form.submit();
}


<!-- Continue to "new.asp" if all values are correct -->
<form action="new.asp" method="post" name="form" onsubmit="ValidateForm(); return false;">
<table width="100%" border="0" cellspacing="1" cellpadding="0" id="title1">
<tr>
<td width="25%" align="left" valign="top">
<p>Title</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="title" size="10" maxlength="20">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="firstname" size="35" maxlength="30">
</td>
</tr>
<tr>
<td>applicants</td>
<!-- Switch between 1 or 2 applicants -->
<td>1<input type="radio" name="r1" id="new" value="" checked onclick="document.getElementById('title2').style.display='none';"><br />
2<input type="radio" name="r1" id="new" value="" onclick="document.getElementById('title2').style.display='block';">
</td>
</tr>
</table>
<table id="title2" border="0" style="display:none;">
<tr>
<td width="25%" align="left" valign="top">
<p>Title2</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="title2" size="10" maxlength="20">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name2</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="firstname2" size="35" maxlength="30">
</td>
</tr>
</table>
<button type="submit">submit</button>
</form>

[Tigger]

Thanks Fang.
U R A STAR!

The code works just as I had hoped and you made it easy for me to understand and add into my script.

Much appreciated.

[Tigger]

Oh no!

When I checked my page in Netscape 4.7 the show / hide function doesn't work. I know that this is an old browser, but our site still has quite a few visitors that use it so we need to cater for them. The elements with this functionality are fixed at the state they are in when the page is opened.

Please can you help???
Many thanks

[pyro]

NS 4.x support of this kind of stuff is rather lacking, but this comes close. For browsers that support getElementById, it uses that and display:block/none, for NN 4.x it uses document.layers and display:hidden/visible. This is because NN4.x does not support the display property.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show/Hide Example</title>

<script type="text/javascript">
function showhide(what) {
if (what == "hide") {
if (document.getElementById) {
document.getElementById("mydiv").style.display = "none";
}
else if (document.all) {
document.all["mydiv"].style.display = "none";
}
else {
document.layers["mydiv"].visibility = "hidden";
}
}
else {
if (document.getElementById) {
document.getElementById("mydiv").style.display = "block";
}
else if (document.all) {
document.all["mydiv"].style.display = "block";
}
else {
document.layers["mydiv"].visibility = "visible";
}
}
}
</script>

</head>
<body>
<div id="mydiv" style="position: relative;">This can be shown/hidden</div>
<br>
<form>
<p><input type="button" value="hide" onclick="showhide('hide');">
<input type="button" value="show" onclick="showhide('show');"></p>
</form>
</body>
</html>Also note that the position:relative in the <div> is very important as in NN if the position isn't set, you will not be able to reference the visibility property.

Tested in IE6, Mozilla 1.4, and NN4.7, but should also work in IE 4 (due to the document.all)

[Tigger]

Thanks for that Pyro.

I am fairly new to javascript and sometimes have problems with adding new code into my script. I have tried adding your code, but so far have had no luck in making it work.
I have added a shortened version of my script below, can you show me how to add your code in?

<html>
<head>
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title>Consultancy Service</title>
<script>
<!--// preload images:
if (document.images) {
submit1 = new Image(50,50); submit1.src = "../images/services/submit1.gif";
submit2 = new Image(50,50); submit2.src = "../images/services/submit2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//-->
</script>
<script LANGUAGE="JavaScript">
<!--//

function ValidateForm(){
var at_pos;
var pd_pos;
var sp_pos;
var em_len;

if (document.form.title.value.length==0)
{
alert("Please enter your title");
document.form.title.focus();
return;
}
if (document.form.firstname.value.length==0)
{
alert("Please enter your first name");
document.form.firstname.focus();
return;
}

//Only validate if 2nd applicant visible


if(document.getElementById('applicant2').style.display=="block") {

if (document.form.title2.value.length==0)
{
alert("Please enter your title (2nd Applicant)");
document.form.title2.focus();
return;
}
if (document.form.firstname2.value.length==0)
{
alert("Please enter your first name (2nd Applicant)");
document.form.firstname2.focus();
return;
}
}


//end 2nd applicant

//mortgage details

if (document.form.mortgage.options[document.form.mortgage.selectedIndex].value == "Please Select")
{
alert("Please select your mortgage type");
document.form.mortgage.focus();
return;
}
if(document.getElementById('price').style.display=="block") {

if (document.form.price.value.length==0)
{
alert("Please enter the purchase price of your property");
document.form.price.focus();
return;
}
}
if (document.form.borrow.value.length==0)
{
alert("Please enter the amount you would like to borrow");
document.form.borrow.focus();
return;
}

else
{
document.form.submit();
}
}

//-->
</script>
</head>
<body>
<br>
<table width="96%" align="center" background ="" border="0" cellPadding="0" cellSpacing="0"><!-- header - logo, heading, line and buttons -->
<tr>
<td>&nbsp;</td>
<td colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="form">
<tr>
<td>
<form action="m_enqform_res.asp" method="post" name="form" onsubmit="ValidateForm();return false;">
<table width="80%">
<tr>
<td width="60%"><p>Please indicate whether this is a single or joint application</p></td><!-- Switch between 1 or 2 applicants -->
<td width="20%"><p class="bodylinks">Single<input type="radio" name="application" id="application" value="" checked onclick="document.getElementById('applicant2').style.display='none';"></p></td>
<td width="20%"><p class="bodylinks">Joint<input type="radio" name="application" id="application" value="" onclick="document.getElementById('applicant2').style.display='block';"></p></td>
</tr>
</table>
<br>

<!--Applicant 1 Details-->

<table width="100%" border="0" cellspacing="1" cellpadding="2" id="applicant1">
<tr>
<td colspan="2"><p class="bodylinks">Applicant Details</p></td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>Title</p>
</td>
<td align="left" valign="top" width="60%">
<input name="title" size="10" maxlength="20" >
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name</p>
</td>
<td align="left" valign="top" width="60%">
<input name="firstname" size="35" maxlength="30" >
</td>
</tr>
</table>

<!--End of Applicant 1 Details-->

<br>

<!--Applicant 2 Details-->

<table id="applicant2" border="0" style="DISPLAY: none">
<tr>
<td colspan="2"><p class="bodylinks">2nd Applicant Details</p></td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>Title</p>
</td>
<td align="left" valign="top" width="60%">
<input name="title2" size="10" maxlength="20" >
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name</p>
</td>
<td align="left" valign="top" width="60%">
<input name="firstname2" size="35" maxlength="30" >
</td>
</tr>
</table>

<!--End of Applicant 2 Details-->

<br>

<!--Mortgage Details-->

<table width="100%" border="0" cellspacing="1" cellpadding="2" id="mortgage">
<tr>
<td colspan="2"><p class="bodylinks">Mortgage Details</p></td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
<p>Mortgage Type</p>
</td>
<td align="left" valign="top">
<select id="mortgage" name="mortgage">
<option selected value="Please Select">Please select...</option>
<option>First Time Buyers</option>
<option>Next Time Buyers</option>
<option>Right to Build</option>
<option>Self-build</option>
<option>Re-mortgage</option>
<option>Home Equity Release</option>
<option>Buy to Let</option>
<option>Buy to Let Re-mortgage</option>
</select>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
<p>Have You Found a Property?</p></td>
<td align="left" valign="top"><p>Yes<input type="radio" name="foundproperty" id="foundproperty" value="yes" checked onclick="document.getElementById('price').style.display='block';">&nbsp;&nbsp;&nbsp;&nbsp;
No<input type="radio" name="foundproperty" id="foundproperty" value="no" onclick="document.getElementById('price').style.display='none';"></p></td>
</tr>
<tr id="price" style="DISPLAY: block">
<td align="left" valign="top">
<p>Property Valuation / Purchase Price (£)</p>
</td>
<td align="left" valign="top">
<input name="price" size="20" maxlength="10" id="price">
</td>
</tr>
<tr>
<td align="left" valign="top">
<p>How Much Would You Like to Borrow? (£)</p>
</td>
<td align="left" valign="top">
<input name="borrow" size="20" maxlength="10">
</td>
</tr>
</table>

<!--End of Mortgage Details-->

<tr>
<td align="center" valign="top" height="24"><A class=bodylinks href="javascript:ValidateForm()" onmousedown="hiLite('img02','submit2')" onmouseout="hiLite('img02','submit1')" onmouseover="hiLite('img02','submit2')" onmouseup="hiLite('img02','submit1')">
<img align="absBottom" alt="Submit Form" border="0" width="61" height="24" loop="0" name="img02" src="../images/services/submit1.gif"></a>
</td>
</tr>
</form>
</td>
</tr>
</table>
</table>
</body>
</html>

Your assistance is greatly appreciated.

[Tigger]

I really am having trouble with this one!

My main problem of being a newbie is that I struggle when it comes to including multiple functions into my script, especially when one depends on another.

I really would be eternally grateful if someone could show me how to add Pyro's code into the script in my last post. I have tried and tried, but can only get it to work in IE still. Unfortunately I really need it to work in all browsers or I can't use it at all, and I would hate to see all of my hard work, and that of others, go to waste.

Please help a struggling newbie!

[Fang]

There's a typo on line 217: "javascript" not "java script".
Try and put all your javascript in one block:

<script type="text/javascript">
<!--
// all code here
//-->
</script>

Validate your code, there are errors! Try CSE validator (http://www.htmlvalidator.com/) it's free and the W3C validator (http://validator.w3.org/)

[Tigger]

Thanks for the links to the validators. I have now validated my script and made corrections where I can (don't know where the typo came from though as it's correct in my original script).

I am really getting into a pickle with my code now, as the initial state of my 2nd Applicant is now visible, even though the radio button for Single applicant is selected. I think that I am having a problem with my radio buttons, but am unsure as to what is wrong with them.

I have added Pyro's script into mine, but I am not sure that I have done it correctly as it still doesn't appear to work in NN4.7. Do I actually put Pyro's function showhide within my function ValidateForm? Or, do I reference to it somehow if it is outside of the ValidateForm function?

Please can you help me out, as I appear to be even more of a novice than I thought! This is a great learning curve for me, but I keep seem to be hitting a brick wall with my code!

Here's a bit of what I have so far (corrected with the validator) :

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Consultancy Service</title>
<link rel="stylesheet" type="text/css" href="../ie_css/ieweb.css">
<style TYPE="text/css">
<!--
BODY { background: url("../images/backgrd/mgagesbck.jpg") #FFFFFF bottom right no-repeat fixed}
-->
</style>
<script LANGUAGE="JavaScript" type="text/javascript">
<!--//

function ValidateForm(){

if (document.form.title.value.length==0)
{
alert("Please enter your title");
document.form.title.focus();
return;
}
if (document.form.firstname.value.length==0)
{
alert("Please enter your first name");
document.form.firstname.focus();
return;
}
//Only validate if 2nd applicant visible

{
if(document.getElementById){
document.getElementById("applicant2").style.display=="none";
}
else if (document.all) {
document.all["applicant2"].style.display = "none";
}
else {
document.layers["applicant2"].visibility = "hidden";
}
}
else {
if (document.getElementById) {
document.getElementById("applicant2").style.display = "block";
}
else if (document.all) {
document.all["applicant2"].style.display = "block";
}
else {
document.layers["applicant2"].visibility = "visible";
}


if (document.form.title2.value.length==0)
{
alert("Please enter your title (2nd Applicant)");
document.form.title2.focus();
return;
}
if (document.form.firstname2.value.length==0)
{
alert("Please enter your first name (2nd Applicant)");
document.form.firstname2.focus();
return;
}
else
{
document.form.submit();
}
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="form">
<tr>
<td>
<form action="m_enqform_res.asp" method="post" name="form" onsubmit="ValidateForm();return false;">
<table width="80%">
<tr>
<td width="60%"><p>Please indicate whether this is a single or joint application</p></td><!-- Switch between 1 or 2 applicants -->
<td width="20%"><p class="bodylinks">Single<input type="radio" name="application" id="application" value="" checked onclick="document.getElementById('applicant2').style.display='none';"></p></td>
<td width="20%"><p class="bodylinks">Joint<input type="radio" name="application" id="application" value="" onclick="document.getElementById('applicant2').style.display='block';"></p></td>
</tr>
</table>
<br>

<!--Applicant 1 Details-->

<table width="100%" border="0" cellspacing="1" cellpadding="2" id="applicant1">
<tr>
<td colspan="2"><p class="bodylinks">Applicant Details</p></td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>Title</p>
</td>
<td align="left" valign="top" width="60%">
<input name="title" size="10" maxlength="20" >
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name</p>
</td>
<td align="left" valign="top" width="60%">
<input name="firstname" size="35" maxlength="30" >
</td>
</tr>
</table>

<!--Applicant 2 Details-->

<div id="applicant2" style="position: relative;">
<table id="applicant_2" border="0">
<tr>
<td colspan="2"><p class="bodylinks">2nd Applicant Details</p></td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>Title</p>
</td>
<td align="left" valign="top" width="60%">
<input name="title2" size="10" maxlength="20" >
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name</p>
</td>
<td align="left" valign="top" width="60%">
<input name="firstname2" size="35" maxlength="30" >
</td>
</tr>
</table>
</div>
<table>
<tr>
<td align="center" valign="top" height="24"><A class=bodylinks href="javascript:ValidateForm()" onmousedown="hiLite('img02','submit2')" onmouseout="hiLite('img02','submit1')" onmouseover="hiLite('img02','submit2')" onmouseup="hiLite('img02','submit1')">
<img align="absBottom" alt="Submit Form" border="0" width="61" height="24" loop="0" name="img02" src="../images/services/submit1.gif"></a>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>