Creating conditionally required input fields with visual feedback using DHTML, XHTML, and CSS

By Donovan Myers
Posted on Mar 16, 2007

Recently, I was asked by one of our clients to come up with a way to make one set of input fields required if a particular radio button was checked and another set of input fields if the other radio button was checked. That would be just a simple JavaScript form check, however we also wanted to use CSS to visually let the user know that the field had just become required by making the text bold as well as adding a red asterisk (*) to the beginning.

Setting up the basics

To begin, I created the XHTML for the form elements, adding the code that visually specifies each field as being required (we will change this later with CSS).


<form method="post" name="form1" id="form1">

<p><strong>Preferred mailing address:</strong> <input type="radio" name="MailingAddress" value="Home" id="mailingadresshome" onClick="updateHome();" /> <label for="mailingaddresshome">Home</a> <input type="radio" name="MailingAddress" value="Work" onClick="updateWork();" /> <label for="mailingaddresswork">Work/School</label></p>

<p><strong>Preferred billing address:</strong> <input type="radio" name="BillingAddress" value="Home" id="billingaddresshome" onClick="updateHome();" /> <label for="billingaddresshome">Home</label> <input type="radio" name="BillingAddress" value="Work" id="billingaddresswork" onClick="updateWork();" /> <label for="billingadresswork">Work/School</label></p>

<p><label for="address" class="normal" id="addresslabel"><span class="red">*</span>Home Address</label> <input type="text" name="Address" value="" id="address" size="15" /></p>

<p><label for="workaddress" class="normal" id="workaddresslabel"><span class="red">*</span>Work/School Address</label> <input type="text" name="WorkAddress" value="" id="workaddress" size="15" /></p>

</form>


I created the following JavaScript to check which radio buttons were checked and set the class of the label to normal or required accordingly.


function updateHome() {
change('addresslabel', 'required'); //make address required

// is the first home radio checked?
if(getCheckedValue(document.forms['form1'].elements['MailingAddress']) == "Home") {
// is the second home radio checked?
if(getCheckedValue(document.forms['form1'].elements['BillingAddress']) == "Home") {
change('workaddresslabel', 'normal'); //make address normal
}
}
}


function updateWork() {
change('workaddresslabel', 'required'); //make address required

// is the first work radio checked?
if(getCheckedValue(document.forms['form1'].elements['MailingAddress']) == "Work") {
// is the second work radio checked?
if(getCheckedValue(document.forms['form1'].elements['BillingAddress']) == "Work") {
change('addresslabel', 'normal'); //make address normal
}
}
}


The only problem is that we need scripts for change() and getCheckedValue(), which are shown below:


function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}


function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}


Lastly, I used this basic CSS to visually show required field's labels as bold with a red asterisk (*) and to reset the labels to normal with no red asterisk or bolding:


.normal {
font-weight: normal;
}

.normal .red {
display: none;
margin-right: .25em;
}

.required {
font-weight: bold;
}

.required .red {
color: red;
margin-right: .25em;
}


Working Example

View a working example of this article.