Survey Form Validating

[kbeniek]

I am fairly new to javascript and am trying to validate to make sure that all of the questions on a survey have been answered. The problem I have is that each page has up to 6 questions on it that either use checkbox, radiobuttons or text boxes to answer. Because there can be four different sets of questions and answers on any of the pages I don't know ahead of time what the question or answer will be without the id passed in. I would appreciate any help that I can get.

Thanks in advance,

KBENIEK

[glenngv]

How do you name your checkboxes, radio buttons and textboxes?
Can you show us some html codes?

[Harry]

Here is some code that I use a lot with a couple of examples of form fields I am validating. Hope this helps you.

Harry

<script type="text/javascript" language="JavaScript">

// Each required form field can be checked with JavaScript. Here are

// the function names for the different kinds of checks:

//

// 1. WithoutContent() -- check if the text, textarea, password,

// or file fields has no content.

// 2. NoneWithContent() -- check if none of the set of text,

// textarea, password, or file fields have content.

// (Set: More than one with the same field name.)

//

// 3. NoneWithCheck() -- check if none of the set of radio buttons

// or checkboxes are checked. (Set: More than one with the

// same field name.)

// 4. WithoutCheck() -- check if the single radio button or checkbox

// is unchecked.

//

// 5. WithoutSelectionValue() -- check if selected drop-down list or

// select box entries have no value.

//

//

// The format for using the above functions is

// if( WithoutContent([FORMFIELDVALUE])) [ERRORMESSAGE]

// if( NoneWithContent([FORMFIELD]) ) [ERRORMESSAGE]

// if( NoneWithCheck([FORMFIELD]) ) [ERRORMESSAGE]

// if( WithoutCheck([FORMFIELD]) ) [ERRORMESSAGE]

// if(WithoutSelectionValue([FORMFIELD]) ) [ERRORMESSAGE]

//

// The if(...) Part and the error message Part may be on separate lines, like

// if(WithoutContent([FORMFIELDVALUE]))

// [ERRORMESSAGE]

// if(NoneWithContent([FORMFIELD]))

// [ERRORMESSAGE]

// if(NoneWithCheck([FORMFIELD]))

// [ERRORMESSAGE]

// if(WithoutCheck([FORMFIELD]))

// [ERRORMESSAGE]

// if(WithoutSelectionValue([FORMFIELD]))

// [ERRORMESSAGE]

//

//

// FORMFIELD -- The format for specifying a "form field" is

// document.[FORMNAME].[FIELDNAME]

// FORMFIELDVALUE -- The format for specifying a "form field value" is

// document.[FORMNAME].[FIELDNAME].value

// ERRORMESSAGE -- The format for specifying an "error message" is

// { errormessage += "\n\n[MESSAGE]"; }

// If the message itself contains quotation marks,

// they must be preceded with a back slash.

// Example: \"

//

//

// FORMNAME -- The name assigned to the form in the <FORM... tag.

// FIELDNAME -- The field name being checked.

//

//

// For use with this JavaScript, the only non-alphanumeric character a

// fieldname may have is the underscore. Replace any hyphens, colons,

// spaces, or other non-alphanumeric characters in your field names

// with an underscore character.

//

//

// Put field checks into the function crf(), in the order

// you want the fields checked.

//





function crf() {



var errormessage = new String();



// Put field checks below this point.



// Section = Demographics. Window position=0,80

if(NoneWithCheck(document.profile.dual_cert_beds)){

var elem = document.getElementById("000010");

elem.style.background = "#ff0000";

var elem = document.getElementById("000020");

elem.style.background = "#ff0000";

window.scrollTo(0,80);

errormessage += "\n\nPlease indicate dually certified beds.";

alert('NOTE: Input Error !!!!' + errormessage);

return false;



}



if(NoneWithCheck(document.profile.ded_pvt_rooms)){

var elem = document.getElementById("000030");

elem.style.background = "#ff0000";

var elem = document.getElementById("000040");

elem.style.background = "#ff0000";

window.scrollTo(0,80);

errormessage += "\n\nPlease indicate if you have Dedicated Private Rooms.";

alert('NOTE: Input Error !!!!' + errormessage);

return false;



}





return true;









// Put field checks above this point.

} // end of function crf()





function WithoutContent(ss) {

if(ss.length > 0) { return false; }

return true;

}



function NoneWithContent(ss) {

for(var i = 0; i < ss.length; i++) {

if(ss[i].value.length > 0) { return false; }

}

return true;

}



function NoneWithCheck(ss) {

for(var i = 0; i < ss.length; i++) {

if(ss[i].checked) { return false; }

}

return true;

}



function WithoutCheck(ss) {

if(ss.checked) { return false; }

return true;

}



function WithoutSelectionValue(ss) {

for(var i = 0; i < ss.length; i++) {

if(ss[i].selected) {

if(ss[i].value.length) { return false; }

}

}

return true;

}



//-->

</script>

[kbeniek]

The code is coming out of xml and would be something like:

<input type="radio" name="618" value="1149" />
<input type="radio" name="618" value="1150" />
<input type="radio" name="618" value="1151" />
<input type="radio" name="618" value="1152" />

<input type="checkbox" name="620" value="1156" />
<input type="checkbox" name="620" value="1157" />
<input type="checkbox" name="620" value="1158" />

<input type="radio" name="618" value="1160" />
<input type="radio" name="618" value="1161" />
<input type="radio" name="618" value="1162" />

Just to clarify again each page generally has 6 questions with a variation of answer types. These 6 questions come from four sets of questions and answers each having a differnet name and value.

Thanks for helping out....

kbeniek

[glenngv]

Sorry

Message removed. Accidentally hit the Post button while posting.

[glenngv]

In your sample html, why was the 3rd group of choices the same name with the 1st group? Was that just a typo? I'm assuming you are using a server-side language to dynamically generate the questions/answers from xml.

Is it possible you generate them like this so that it's easier to do the validation?

<div id="q1">
<input type="radio" name="618" value="1149" />
<input type="radio" name="618" value="1150" />
<input type="radio" name="618" value="1151" />
<input type="radio" name="618" value="1152" />
</div>

<div id="q2">
<input type="checkbox" name="620" value="1156" />
<input type="checkbox" name="620" value="1157" />
<input type="checkbox" name="620" value="1158" />
</div>

<div id="q3">
<input type="radio" name="621" value="1160" />
<input type="radio" name="621" value="1161" />
<input type="radio" name="621" value="1162" />
</div>

I would like to confirm this first before proceeding with the concrete solution.

[beetle]

https://www.peterbailey.net/fValidate/

[glenngv]

alternative

<html>
<head>
<script type="text/javascript">
function validate(){
  var q, choices, bValid, i=1;
  while (q=document.getElementById('q'+(i++))){
    choices=q.getElementsByTagName('INPUT');
    bValid=false;
    inner_loop:
    for (var j=0;j<choices.length;j++){
      switch (choices[j].type){
        case 'radio': 
        case 'checkbox': 
          if (choices[j].checked) {
             bValid=true;
             break inner_loop;
          }
          break;
        case 'text': 
          if (choices[j].value!='') {
             bValid=true;
             break inner_loop;
          }
          break;
      }
    }
    if (!bValid){
      alert('Please provide an answer to Question #'+(i-1)+'.');
      choices[0].focus();
      return false;
    }
  }
  return true;
}
</script>
</head>
<body>
<form action="javascript:alert('submitted.')" onsubmit="return validate()">
<div id="q1">
<div>Question 1</div>
<input type="radio" name="618" value="1149" /><br />
<input type="radio" name="618" value="1150" /><br />
<input type="radio" name="618" value="1151" /><br />
<input type="radio" name="618" value="1152" />
</div>

<div id="q2">
<div>Question 2</div>
<input type="checkbox" name="620" value="1156" /><br />
<input type="checkbox" name="620" value="1157" /><br />
<input type="checkbox" name="620" value="1158" />
</div>

<div id="q3">
<div>Question 3</div>
<input type="radio" name="621" value="1160" /><br />
<input type="radio" name="621" value="1161" /><br />
<input type="radio" name="621" value="1162" />
</div>

<div id="q4">
<div>Question 4</div>
<input type="text" name="622" /><br />
<input type="text" name="622" /><br />
<input type="text" name="622" /><br />
</div>

<div><input type="submit" value="Submit"></div>

</form>
</body>
</html>