radio button form validation

**gingerj** · 04-05-2006, 09:14 AM

Hi I'm trying to get some validation working on a set of form elements but my alert keep's on alerting regardless of the radio btn being checked. Can someone tell me what I'm doing wrong please.

Code:

<html>
<title>Radio Button Validation</title>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
function checkform()
{
if (!document.feedback.field.checked) {
		alert('There is a problem with...');
	return false;
}
}
</script>


<form onSubmit="checkform()" name="feedback">
<input type="radio" value="A" name="field">A
<br>
<input type="radio" value="B" name="field">B
<br>
<input type="radio" value="C" name="field">C
<br>
<input type="radio" value="D" name="field">D
<br>
<input type="submit" value="Submit">
</form>

</body>
</html>

**gingerj** · 04-05-2006, 10:09 AM

Solved the first bit to my problem, but I've got another problem as I'm not a strong JS programmer how can I tweak the script so that it checks more than one set of radio buttons as I'm building a questionnaire and will be asking more than one question ie. something like this:

Code:

<html>
<title>Radio Button Validation</title>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
function valbutton(thisform) {
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--) {
if (thisform.myradiobutton[i].checked) {
myOption = i;
}
}
if (myOption == -1) {
alert("You must select a radio button");
return false;
}

alert("your cool");

thisform.submit(); 
}
</script>


<form name="myform">
<input type="radio" value="1st value" name="myradiobutton" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
<input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />

<input type="radio" value="1st value" name="myradiobutton2" />a<br />
<input type="radio" value="2nd value" name="myradiobutton2" />b<br />
<input type="radio" value="3rd value" name="myradiobutton2" />c<br />&nbsp;<br />
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
</form>

</body>
</html>

**mwinter** · 04-06-2006, 06:01 PM

Originally Posted by gingerj

<html>

All HTML documents should start with a document type declaration, and the only one of interest now should be reference the Strict DTD:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>

<title>Radio Button Validation</title>

Though both the start and end tags of the head and body elements are optional, it's generally considered good form to include them.

Style sheets should now replace presentational elements and attributes. More importantly, however, if you specify one colour, you must specify them all: background, foreground, and link state. Failing to do so can leave a document unreadable if the author assumes a default that does apply. For example, my colour scheme in Linux (though it could just as easily be Windows) uses a white foreground colour. If you just specify white as the background and assume that the foreground is black, I'll get a lovely, apparently blank, white viewport. Not a very good impression to make.

Code:

body {
  background: #ffffff;
  color: #000000;
}
a {
  background: transparent;
}
a:link {
  /* The explicit background, above, will be cascaded to this rule and the
   * similar ones below.
   */
  color: #0000a0;
}
a:visited {
  color: #551a8b;
}
/* Specify hover colour as well, if you like, using a:link:hover and
 * a:visited:hover as selectors.
 */

The language attribute has long been deprecated in favour of the type attribute:

HTML Code:

<script type="text/javascript">

function valbutton(thisform) {
myOption = -1;

Variables should be given as little scope as possible. In other words, myOption should be local, and declared with a var statement:

Code:

function getSelectedControl(group) {
  for (var i = 0, n = group.length; i < n; ++i)
    if (group[i].checked) return group[i];
  return null;
}

function validate(form) {
  var controls = form.elements;

  if (!getSelectedControl(controls.myradiobutton)) {
    alert('Please answer the first question by selecting an option.');
    return false;
  }
  if (!getSelectedControl(controls.myradiobutton2)) {
    alert('Please answer the second question by selecting an option.');
    return false;
  }
  return true;
}

With a consistent naming scheme, the above could be simplified to a loop, such as:

Code:

var questions = 2;

/* Definition of getSelectedGroup omitted */

function validate(form) {
  var controls = form.elements;

  for (var i = 1; i <= questions; ++i)
    if (!getSelectedControl(controls['myradiobutton' + i])) {
      alert('Please answer question #' + i + ' by selecting an option.');
      return false;
    }
  return true;
}

which would assume that there were questions questions, each named myradiobuttonN, where N was a number between 1 and questions, inclusive.

thisform.submit();

Code should never need to call the submit method. That's what submit buttons are for.

There's no need to name the form element. See below.

Drop the XML-like syntax. Use HTML. Also, these radio buttons should be marked up as a list:

HTML Code:

<ul class="question-group">
  <li>
    <label><input name="myradiobutton" type="radio" value="1st value"> 1st</label>
  </li>
  <li>
    <label><input name="myradiobutton" type="radio" value="2nd value"> 2nd</label>
  </li>
  <li>
    <label><input name="myradiobutton" type="radio" value="3rd value"> 3rd</label>
  </li>
</ul>

If you don't like the default style, such as the bullet marks, use CSS to remove them. Furthermore, rather than using line breaks (br elements), add margins to elements.

Code:

ul.question-group, ul.question-group li {
  margin: 0;
  padding: 0;
}
ul.question-group {
  list-style: none;
  margin-bottom: 1em;
}

<input type="submit" name="submitit"

Unless you need the submit button to be successful (that is, available as data when submitted), and you probably don't, there's no need to name the control.

onclick="valbutton(myform);return false;" [...]

You seem to be assuming that the identifier, myform, should be in the scope chain. It shouldn't. To refer to the form, the form property of the button can be used. For example,

HTML Code:

<input type="submit" value="Validate" onclick="valbutton(this.form); return false;">

However, it's better to respond to the submit event of the form. Using the function I defined above:

HTML Code:

<form action="..." method="..." onsubmit="return validate(this);">

Hope that helps,
Mike

Thread: radio button form validation

Thread Tools

Search Thread

radio button form validation

Bookmarks

Bookmarks

Posting Permissions