Results 1 to 5 of 5

Thread: Form Validation

  1. #1
    Join Date
    Jan 2007
    Location
    Washington DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Form Validation

    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;
    }
    }
    Last edited by jonsey; 01-30-2007 at 03:13 PM.

  2. #2
    Join Date
    Jul 2006
    Location
    Graham, NC
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  3. #3
    Join Date
    Jan 2007
    Location
    Washington DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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>

  4. #4
    Join Date
    Jul 2006
    Location
    Graham, NC
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #5
    Join Date
    Jan 2007
    Location
    Washington DC
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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??

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •