PDA

View Full Version : Interesting problem in form validation

rybrns
08-05-2005, 06:37 AM
This is a strange problem: how do you validate a textarea on a form where there must be content in only one of several fields?

The code goes like this:
******************
<form name.... method... blah...>

<input name=radio1 value="1" type=radio...>
<textarea name="1"> </textarea>

<input name=radio1 value="2" type=radio...>
<textarea name="2"> </textarea>

<input name=radio1 value="3" type=radio...>
<textarea name="3"> </textarea>

<input name=radio1 value="4" type=radio...>
<textarea name="4"> </textarea>

<input type=submit:... blah>
</form>
*********************

So there are 4 choices each of which has a textarea, and only one can be selected. I need to validate that the textarea associated with that radio control has data, or if that's not possible, that at least one of the textareas has been filled in (assuming the visitor filled in the right one). I've tried a bunch of different approaches but none comes even close so I'm not even going to try to post any.

Does this problem have a solution? tia.
coothead
08-05-2005, 09:08 AM
Hi there rybrns,

have a look at this, it may give you some ideas...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>form validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<script type="text/javascript">
<!--
function checkTextarea() {
var temp='';
var tArea=document.forms[0].getElementsByTagName('textarea');
for(i=0;i<tArea.length;i++) {
temp+=tArea[i].value;
}
if(temp=='') {
alert('please use at least one textarea');
return false;
}
}

function disableTextareas(a,b,c,d) {
var df=document.forms;
df[0][a].disabled=false;
df[0][a].style.backgroundColor='#fff'; /*this is for IE which does not identify disabled with color*/
df[0][b].disabled=true;
df[0][b].style.backgroundColor='#d4d0c8'; /*this is for IE which does not identify disabled with color*/
df[0][c].disabled=true;
df[0][c].style.backgroundColor='#d4d0c8'; /*this is for IE which does not identify disabled with color*/
df[0][d].disabled=true;
df[0][d].style.backgroundColor='#d4d0c8'; /*this is for IE which does not identify disabled with color*/
}
//-->
</script>

</head>
<body>

<form action="#" onsubmit="return checkTextarea()">
<div>

<input name="radio1" value="1" type="radio" onclick="disableTextareas(1,3,5,7)"/>
<textarea name="1" rows="4" cols="15"></textarea>

<input name="radio1" value="2" type="radio" onclick="disableTextareas(3,1,5,7)"/>
<textarea name="2" rows="4" cols="15"></textarea>

<input name="radio1" value="3" type="radio" onclick="disableTextareas(5,1,3,7)"/>
<textarea name="3" rows="4" cols="15"></textarea>

<input name="radio1" value="4" type="radio" onclick="disableTextareas(7,1,3,5)"/>
<textarea name="4" rows="4" cols="15"></textarea>

<input type="submit"/>

</div>
</form>

</body>
</html>
rybrns
08-05-2005, 12:38 PM
That's cool. Elegant too. Took a few minutes for me to realize that the (1,3,5,7) referred to the field item count and not to the field names (!). Right.

The script is so useful that I also used it to turn off other fields associated with the deactivated textarea when I saw it wasn't constrained just to textareas.

Thanks very much!
coothead
08-05-2005, 02:54 PM
Hi there rybrns,

I am pleased that you liked the first solution. :D

But, you may find this a little more refined..onclick handlers are set in the script...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>form validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<script type="text/javascript">
<!--

function checkTextarea(test,num) {
var temp='';
var tArea=document.forms[0].getElementsByTagName('textarea');
for(i=0;i<tArea.length;i++) {
temp+=tArea[i].value;
if(num!=null) {
tArea[i].style.backgroundColor='#d4d0c8';
tArea[i].disabled=true;
tArea[num-1].style.backgroundColor='#fff';
tArea[num-1].disabled=false;
}
}
if(temp==''&&test==true) {
alert('please use at least one textarea');
return false;
}
}

function setHandler() {
var radio= document.forms[0].getElementsByTagName('input');
for (i=0; i<disR.length; i++) {
if(radio[i].type=='radio') {
radio[i].onclick = function() {
checkTextarea(false,parseFloat(this.value));
}
}
}
}
onload = setHandler;

//-->
</script>

</head>
<body>

<form action="#" onsubmit="return checkTextarea(true,null)">
<div>

<input name="radio1" value="1" type="radio"/>
<textarea name="1" rows="4" cols="15"></textarea>

<input name="radio1" value="2" type="radio"/>
<textarea name="2" rows="4" cols="15"></textarea>

<input name="radio1" value="3" type="radio"/>
<textarea name="3" rows="4" cols="15"></textarea>

<input name="radio1" value="4" type="radio"/>
<textarea name="4" rows="4" cols="15"></textarea>

<input type="submit"/>

</div>
</form>

</body>
</html>
rybrns
08-06-2005, 12:13 AM
Yes, that worked well. I need to look over your second idea. Meanwhile, I ran into the issue of trying to have multiple onClick event handlers firing from one form field... the typical issue of validating a field and saving its value to post into a "Total" field. I can get one or the other to work but not both, even by calling a function to do both.

The code looks like this, using your suggested first script:

******************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
<!--
function disableTextareas(a,b,c,d) {
var df=document.forms;
df[0][a].disabled=false;
df[0][a].style.backgroundColor='#fff'; /*this is for IE which does not identify disabled with color*/
df[0][b].disabled=false;
df[0][b].style.backgroundColor='#fff'; /*this is for IE which does not identify disabled with color*/
df[0][c].disabled=true;
df[0][c].style.backgroundColor='#d4d0c8'; /*this is for IE which does not identify disabled with color*/
df[0][d].disabled=true;
df[0][d].style.backgroundColor='#d4d0c8'; /*this is for IE which does not identify disabled with color*/
}
//-->
</script>

<script language="JavaScript">
<!--
function validateForm(f) {
haveerrors = 0;
// validation stuff here....

return (!haveerrors);
}
//-->
</script>

</head>

<body>
<form name="name" action="something" method="post" onSubmit="return validateForm(this)">
Name: <input name="name" type="text" size="50" maxlength="50"><br> <!--valid by onSubmit-->
Email: <input ame="email" type="text" size="30" maxlength="50"><br><br> <!--valid by onSubmit-->

<input name="Radio1" type="radio" value="10.00" onClick="disableTextareas(6,7,10)"><br> <!--turns off Text2-->
<input name="Radio1" type="radio" value="20.00" onClick="disableTextareas(6,7,10)"><br> <!--same-->
<input name="Radio1" type="radio" value="30.00" onClick="disableTextareas(6,7,10)"><br> <!--same-->
<input name="Radio1" type="radio" value="40.00" onClick="disableTextareas(6,7,10)"><br><br> <!--same-->

Text1: <textarea name="Text" cols="50" rows="3"></textarea><br>
Box1: <input name="box" type="checkbox" value="box"><br><br>

<input name="Radio1" type="radio" value="5.00" onClick="disableTextareas(10,10,6,7)"><br> <!--turns off Text1, Box1-->
<input name="Radio1" type="radio" value="6.00" onClick="disableTextareas(10,10,6,7)"><br><br> <!--same-->

Text2: <input name="Text" type="text" size="70" maxlength="70"><br><br>

Total: <input name="Total" type="text" size="6" maxlength="6"><br>

<input type="submit" name="Submit Form" value="Submit Form">

</form>

</body>
</html>

**********************************

Trying to get "value" just from one of the selected fields into the "Total" field; no math. I can get all this done, even with math, if I don't use the validation scripting, but trying to get both done breaks both.

Below is a quick version of a script that totals a few checked boxes. I can't get both onClick events to fire in an event handler or in a function. Obviously I'm missing something basic, but darned if I can find it. Does anyone see what I'm missing?

***************************
<!-- script to total a few fields -->
<html>
<head>
<script type="text/javascript">
<!--
function choiceAmount(boxPick) {
with (boxPick.form) {
if (boxPick.checked == false)
accTotal.value = eval(accTotal.value) - eval(boxPick.value);
else
accTotal.value = eval(accTotal.value) + eval(boxPick.value);
return(accTotal.value);
}
}
//-->
</script>
</head>
<body>
<form name="formName">
Item 1 <input type="checkbox" name="item1" value="5.00" onClick="this.form.total.value=choiceAmount(this);"><br>
Item 2 <input type="checkbox" name="item2" value="6.00" onClick="this.form.total.value=choiceAmount(this);"><br>
Item 3 <input type="checkbox" name="item3" value="4.00" onClick="this.form.total.value=choiceAmount(this);"><br>

Total: <input type="text" name="total" value="" size="6" readonly><input type="hidden" name="accTotal" value="0">
</form>
</body>
</html>
_Aerospace_Eng_
08-06-2005, 12:33 AM
Try onfocus but onclick should work.
rybrns
08-07-2005, 03:47 PM
Two onClick events in the same form element causes an error. Using onFocus as the second event handler did work. Thanks.