Form Validation - radio Buttons Alert

[leighgoodman]

Hi

If i dont select a radio button option, there is no alert?

Please help:

The html code for the buttons:

<input type="radio" name="retailStores" value="yes" style="margin-bottom:-1px;"/> Yes
<input type="radio" name="retailStores" value="no" style="margin-bottom:-1px;"/>

and the validation.js file has the following:


if ( (strRetailStores[0].checked == false ) && (strRetailStores[1].checked == false ) )
{
alert ( "Please choose Retail: Yes/No" );
document.frmSubscription.retailStores.focus();
valid = false;
}

[codeexploiter]

This is not the correct place for posting this type of queries.

<form name="frmSubscription" method="get" action="" onSubmit="return validate();">
<input id="one" type="radio" name="retailStores" value="yes" style="margin-bottom:-1px;"/> Yes
<input id="two" type="radio" name="retailStores" value="no" style="margin-bottom:-1px;"/>
<br>
<input type="submit" name="submit" value="submit">
</form>

<script type="text/javascript">
function validate()
{
var o = document.getElementById('one');
var t = document.getElementById('two');

if ( (o.checked == false ) && (t.checked == false ) )
{
alert ( "Please choose Retail: Yes/No" );
document.frmSubscription.retailStores.focus();
return false;
}
return true;
}
</script>

Check the method used in the above code

By simply putting the JS code to perform the validation will do the validation. There is a onSubmit event that will be invoked when you press a submit button, call the validating code (keep that as a function) so that it will be invoked just before passing the data from the client to the server.

[mwinter]

if ( (strRetailStores[0].checked == false ) && (strRetailStores[1].checked == false ) )

How is the identifier, strRetailStores, defined? That is most likely the cause of your problem.

A general function can be used for this:

function getCheckedButton(group, form) {
    if (typeof group == 'string') group = form.elements[group];
    for (var i = 0, n = group.length; i < n; ++i)
        if (group[i].checked) return group[i];
    return null;
}

where the first argument is either a collection of radio buttons, or the name of the button group. The second argument is a reference to the containing form, though its only necessary if a string is used for the first argument.

Given a reference, form, you could check the group with either of the following expressions.

getCheckedButton(form.elements.retailStores)

getCheckedButton('retailStores', form);

If null is returned, no button in the group was checked.

Be aware that a group of radio buttons should always have one control checked; one of the controls should possess a checked attribute.

<form ... onSubmit="return validate();">

It is wise for references to the control or form to be passed directly to validation functions:

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

At the very least, this simplifies accessing controls. It also makes some identifiers unnecessary.

<input type="submit" name="submit" value="submit">

Naming submit buttons "submit" is not a good idea: it overwrite the submit method of the form.

var o = document.getElementById('one');
var t = document.getElementById('two');

Don't use the getElementById method to access form controls within a form. Use the elements collection of the latter, instead.

Mike