Our Blog

A blog by InetSolution about programming, security, design and marketing for banks, credit unions and e-commerce.

Creating Conditionally Required Fields on HTML Forms


By Donovan Myers on Tuesday, March 23, 2010


Recently, I was asked by one of our credit union 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;
}

Blog RSS Feed

Request a Consultation

Let us help you accomplish big goals.

‚Äč