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 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

  • Top 10 Essential Website Features Every Bank and Credit Union Should Have in 2020
  • Why We Like WordPress, but Not for Banks and Credit Unions
  • Advice to Banks and Credit Unions for Establishing Website Development Budgets
  • 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

    Blog RSS Feed

    Request a Consultation

    Let us help you accomplish big goals.