Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Radio Field Validate Problem

Radio Field Validate Problem



5:32 am on Jul 26, 2011 (gmt 0)

5+ Year Member

After searching this forum and some others I see I'm not the only one who has had the problem of validating radio buttons. I saw many answers but couldn't get any to work. The script I'm using displays a small image if there is an error. Here is the way the code works:
  <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Preload images
var empty = new Image(); empty.src = "fieldempty.gif";
var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
function validateForm(f) {
haveerrors = 0;

(f.trms.checked != 1) // validate first name length
? showImage("termserror", "fieldempty.gif", true) // no semi-colon after this line!
: showImage("termserror", "blankimage.gif", false); // true = errors, false = no errors

return (!haveerrors);
// End -->

That is the part that goes in the <head> section. In the body tag it is like
<form method="post"action="somefile.pl"name="myform" onSubmit="return validateForm(this)">

In the form an image is inserted where the error is to show up as follows:
<img name=termserror src="blankimage.gif" width=350 height=10 border=0>

If no error the blank, or empty image is all that is there but if an error it is replaced with the image with the error on it.
I've been sitting here for two days trying to get this to somehow cooporate with radio buttons to no avail. I put up a demo page to show what I mean by the images(don't pay attention to the one that shows in the email field when you click on terms--that was part of figuring something out and will be removed when the time comes. The radio buttons are on a different page. [praisenpray.com ]

I've tied for loops into figure 4's the past couple days on this one and would like to get them untangled. Thanx. Dave


4:18 pm on Jul 26, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

First - that is a checkbox. Radio buttons are generally an array (list) of items with the same name:

<input type="radio" name="test" value="1" checked> 1
<input type="radio" name="test" value="2"> 2

formname.test[0] and formname.test[1] respectively.

Second, what happens if you do this?


I'll tell you - you get "false" unchecked, "true" checked. It will never be 1. But you don't even have to test for == true or == false. Just do

(! f.trms.checked)
? showImage("termserror", "fieldempty.gif", true)
: showImage("termserror", "blankimage.gif", false);

Equivalently (that ternary is a little confusing: )

if (! f.trms.checked) { alert('error'); }
else { alert('do whatever'); }

and inversely,

if (f.trms.checked) { alert('do whatever'); }
else { alert('error'); }

All three of those are identical, just showing how it relates to the ternary.


10:25 am on Jul 30, 2011 (gmt 0)

5+ Year Member

First, please accept my apology for giving the wrong link. It was one of them days and when I realized what happened I couldn't change it due to net connection problems this past week.

Anyway, here is a link for the first page I was dealing with(everything is working now. First link is:
[praisenpray.com ]
and next is
[praisenpray.com ]
and lastly
[praisenpray.com ]

I'm using these two forms as examples because of what they do....for instance, in the prayer request form it is configed to require an email address if join online prayer team is checked.

In the other form the neat thing(or so I thought) was if you opt for either the first or third radio choice it also requires and email address

In the guestbook form, while email address is not initially required it does require that an address entered is valid.

Having somewhat of a problem in the word/text counter as the numbers never seem to be right at the start.

I want to thank you much Mr.rocknbil(yes, I'm using Mr---much respect for you). Seems no matter where I post in this forum you have the answer I need and always quick to reply. If everyone in the world were like you it would be much better. If I knew one percent of the things you have probably forgotten I would feel like a pro. Thanx


4:39 pm on Aug 1, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Right, see first post about radio buttons. Here's a simplified example from which you can gather what needs to be done.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function validateRadios (formObject) {
// Array of radios
var atLeastOne = false;
for (j=0;j<formObject.test.length;j++) {
if (formObject.test[j].checked) {
alert(formObject.test[j].id + ' is checked.');
if (! atLeastOne) {
alert('Make at least one selection.');
return false;
// Change to return true if no errors found.
return false;
<form method="post" action="whatever" onsubmit="return validateRadios(this);">
<p><input type="radio" name="test" id="test-1" value="1"> <label for="test-1">One</label></p>
<!-- Proper usage: at least one MUST load checked.
Most clients say no to this, but it's the way radios work
<input type="radio" name="test" id="test-1" value="1" checked>
or for XHTML
<input type="radio" name="test" id="test-1" value="1" checked="checked"/>
<p><input type="radio" name="test" id="test-2" value="2"> <label for="test-2">Two</label></p>
<p><input type="radio" name="test" id="test-3" value="3"> <label for="test-3">Three</label></p>
<p><input type="submit" value="test"></p>

Featured Threads

Hot Threads This Week

Hot Threads This Month