conditional required cfform field + customjavascript validation

[rockasocki]

Thanks for responding. Here's the code I'm using to do this. Perhaps it will
allow a better understanding of what I'm trying to accomplish.

I'm actually not using the "required" attribute for cfinput on the "Headline"
field. I'm using the "onValidate" attribute to only run the javascript
validation when the html table containing the field is visible, which is only
when the user clicks the radio button for "Project Type" = "Press Release".

Custom javascript for validating the Headline form field is not blank:

<script language="JavaScript" type="text/javascript">
function FormCheck()
{
if (document.PR.ProjectType.value=="Press Release" &&
document.PR.Headline.value=="")
{
alert("Headline text required for Press Release email message.");
return false;
}
}
</script>


Custom javascript function for showing/hiding the "Headline1" table containing
the Headline field:

<script language="JavaScript">
function toggleme(targetID)
{
if (targetID.style.display=="none")
targetID.style.display="";
else
targetID.style.display="none";
}
</script>


Here's the code from the cfform where I call the toggleme javascript function:

<cfinput type="radio" name="ProjectType" required="yes" message="Please Select
a Project Type" value="Press Release" onClick="toggleme(Headline1)">Press
Release


Here's the html table which displays/hides when the radio button of value
"Press Release" is selected:

<table id="Headline1" style="display: none;">
<tr valign="baseline">
<td nowrap class="formLabelRequired" align="right" width="25%">Headline:
</td>
<td><cfinput class="formInput" type="text" name="Headline"
value="#selectPRRec.Headline#" size="100" maxlength="255"
onValidate="FormCheck" message="Headline text tequired for Press Relase Email
message.">
</td>
</tr>
</table>

[BSterner]

There's actually multiple issues here.

1) AFAI, you need to reference individual elements of a radio button group as
an array. The array elements are what hold the 'value' property.

2) Your 'FormCheck' function is not returning 'true' if the validation is
successful. In fact you're not returning anything, so the value it's passed is
'undefined', which is not 'true'. Hence the error message all the time.

3) You have an error alert in your javascript function as well as specified in
the 'message' attribute to cfinput. Therefore, if it fails, you're going to be
displaying 2 alerts.

That being said, here is what I think your 'FormCheck' function should look
like.


function FormCheck()
{
var i;
for (var i=0; i < document.PR.ProjectType.length; i++)
{
if (document.PR.ProjectType[i].checked)
{
if (document.PR.ProjectType[i].value=="Press Release" &&
document.PR.Headline.value=="")
{
return false;
}
}
}
return true;
}

[rockasocki]

Thanks BSterner for your help! As it turns out I forgot to include "return
true;" in my custom javascript... I included it and it now works as expected.
I really appreciate your time and effort to help me figure out what was going
wrong! I've replied to each of your points below.

Originally posted by: BSterner
There's actually multiple issues here.

1) AFAIK, you need to reference individual elements of a radio button group as
an array. The array elements are what hold the 'value' property (The exception
to this is if you have a radio "group" w/only a single element).

KR> I used a radio button group, so I don't need to use an array. Thanks for
displaying the technique anyhow!

2) Your 'FormCheck' function is not returning 'true' if the validation is
successful. In fact you're not returning anything, so the value that's passed
to 'onValidate' is 'undefined'. Hence the error message all the time.

KR> Bingo! I forgot to include "return true;" in my custom javascript... I
included it and it now works as expected.

3) You have an error alert in your javascript function and you also specify it
in the 'message' attribute to cfinput. Therefore, if it fails, you're going to
be displaying 2 alerts.

KR> This was a remnant of trial and error. Interestingly enough, the custom
javascript alert is ignored. So unless I include a message="..." along with
the OnValidate attribute in the <cfinput>, I get the default message "Error in
headline text."

That being said, here's what I think your 'FormCheck' function should look
like.


Again, thanks for demonstrating the technique you'd use. I'll keep it in my
bag-o-trix!