Form Validation

**jonsey** · 01-30-2007, 02:31 PM

Need some help with validation with a form? I have several radio buttons on my form along with text areas. What I need to do is make sure if the “NO” radio button is marked they need to provide a comment to that question.

I have come up with this to see if the radio button is marked for each question how would incorporate the comment areas.

Code:

function ValidateAuditSurvey () {
var q=0;
var name;
var prevName=0;
var radioCount=0;

for (var i=0;i<document.forms(0).elements.length;i++){
	if(document.forms(0).elements[i].type=='radio'){
		radioCount++
		if (prevName==0){
			//alert('first time set prevName');
			prevName=document.forms(0).elements[i].name;
		}
		name = document.forms(0).elements[i].name;
		if (prevName!=name){
			//alert('name changed, test q');
			if (q==0){
				//alert('non found');
				break;
				}
				else{
					//alert('found one checked');
				}
			q=0;
				if(document.forms(0).elements[i].checked){
					//alert('found a checked radio, add one to q')
					q++;
				}
			}
			else{ //name is same
				if(document.forms(0).elements[i].checked){
					//alert('found a checked radio, add one to q')
					q++;
				}
			}
		//alert(q+'-'+name+'-'+prevName)
		prevName = document.forms(0).elements[i].name;
	}

}

if (q==0 && radioCount!=0){
	alert('Please select an answer for each question.');
	return false;
}
else{
	document.forms[0].submit()
	return true;
}
}

**4fit?** · 01-31-2007, 01:49 PM

I'm brand new to this stuff, so I certainly could be WAY off, but it seems to me like you could add something like this to your radio button check wherever it is equal to 'No'. You would just need to figure out which element the comment box is and write an alert statement to inform the user that they need to fill out a comment.

Code:

&& document.forms(0).elements[comment box element].value.length = 0

**jonsey** · 01-31-2007, 06:27 PM

I was just told that each question does not need to be answered, but it does need to enforce if a radio button is mark “No” that it would verify that at less 10 characters are entered in the fielded before submitting.
This is what I have so far hope I'm not to far off base here.

HTML Code:

<head>
    <title>Untitled Page</title>
    
    <script language="javascript">
    
    function ValidateAuditSurvey () {
    if (document.getElementById("rlbQ1").checked == false && document.getElementById("txtQ1").value.length = 0 ) {
alert("must provide comment to question answered No.");
}
    }
    </script>
</head>

<body>

<form>
	<p>Some type of question number 1?</p>
	<input id="Radio1" type="radio" name="rlbQ1" value="yes"/>Yes&nbsp; &nbsp;<input id="Radio2" type="radio" name="rlbQ1" value="no"/>NO<br />
	<br />
	Comments<br />
	<textarea id="TextArea1" name="txtQ1" style="width: 240px; height: 65px" rows="3"></textarea>
	<br />
	<br />
	<br />
	Some type of question number 2?<br />
	<br />
	<input id="Radio3" type="radio" name="rlbQ2" value="yes"/>Yes&nbsp; &nbsp;<input id="Radio4" type="radio" name="rlbQ2" value="no"/>NO<br />
	<br />
	Comments<br />
	<textarea id="Textarea2" name="txtQ2" style="width: 240px; height: 65px"></textarea>
	<br />
	<br />
	<br />
	Some type of question number 3?<br />
	<br />
	<input id="Radio5" type="radio" name="rlbQ3" value="yes"/>Yes&nbsp; &nbsp;<input id="Radio6" type="radio" name="rlbQ3" value="no"/>NO<br />
	<br />
	Comments<br />
	<textarea id="Textarea3" name="txtQ3" style="width: 240px; height: 65px"></textarea><br />
	<br />
	<br />

	<input id="Submit1" type="submit" value="submit" onclick="return ValidateAuditSurvey ();"/>
	&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
	&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
	<input id="Reset1" type="reset"
		value="reset" />


</form>

</body>

**4fit?** · 01-31-2007, 07:17 PM

I'm sure there is an easier way of doing this. Like looping throught the form elements that are radio buttons using a for statement and checking their values. But, like I said, I'm new to this stuff.

Anyhow, the code below does what you need. In your code above, you had multiple radio buttons named the same thing. Don't believe you can do that. So, I named eash radio button like rlbQ1yes, rlbQ1no, etc.

HTML Code:

<html>
	<head>
    	<title>Untitled Page</title>
    	<script language="javascript">
			function ValidateAuditSurvey () {
				if ((document.questions.rlbQ1no.checked == true && document.questions.txtQ1.value.length == 0) ||
					(document.questions.rlbQ2no.checked == true && document.questions.txtQ2.value.length == 0) ||
					(document.questions.rlbQ3no.checked == true && document.questions.txtQ3.value.length == 0)) {
						alert("must provide comment to question answered No.");
						return false;
				}
			}
		</script>
	</head>
	<body>
		<form name="questions">
			<p>Some type of question number 1?</p>
			<input id="Radio1" type="radio" name="rlbQ1yes" value="yes"/>Yes&nbsp; &nbsp;<input id="Radio2" type="radio" name="rlbQ1no" value="no"/>NO<br />
			<br />
			Comments<br />
			<textarea id="TextArea1" name="txtQ1" style="width: 240px; height: 65px" rows="3"></textarea>
			<br />
			<br />
			<br />
			Some type of question number 2?<br />
			<br />
			<input id="Radio3" type="radio" name="rlbQ2yes" value="yes"/>Yes&nbsp; &nbsp;<input id="Radio4" type="radio" name="rlbQ2no" value="no"/>NO<br />
			<br />
			Comments<br />
			<textarea id="Textarea2" name="txtQ2" style="width: 240px; height: 65px"></textarea>
			<br />
			<br />
			<br />
			Some type of question number 3?<br />
			<br />
			<input id="Radio5" type="radio" name="rlbQ3yes" value="yes"/>Yes&nbsp; &nbsp;<input id="Radio6" type="radio" name="rlbQ3no" value="no"/>NO<br />
			<br />
			Comments<br />
			<textarea id="Textarea3" name="txtQ3" style="width: 240px; height: 65px"></textarea><br />
			<br />
			<br />
			<input id="Submit1" type="submit" value="submit" onclick="return ValidateAuditSurvey ();"/>
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
			&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
			<input id="Reset1" type="reset"
				value="reset" />
		</form>
	</body>
</html>

**jonsey** · 01-31-2007, 07:58 PM

Think you are right what I need do is make an Array for the elements and some kind of loop and then a look up to see if the comments area is Null.

Would also like to somehow put this into a blur function instead in the submit button. So when the using clicks "No" and pass the comments error will fire off the error message and marking the comment box that they need to fill or no that I think about I could use Twey form dependency manager script, but I will have clear the textarea or disable it if yes is marked. Twey what do you think??

Thread: Form Validation

Thread Tools

Search Thread

Form Validation

Bookmarks

Bookmarks

Posting Permissions