Creating Conditionally Required Fields on HTML Forms for Bank Websites
Recently, I was asked by one of our bank website design 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 on the bank website, 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, for bank website, 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;
}
Other Recent Blog Posts
Find this useful?
Want to receive our monthly tip to make your website easier to use and safer? No spam, just good advice. Signup!
Interests