Description

Makes a field required based on a radio button selection.

Requirements

  1. Have created a Radio Button Form Field with the options you need;
  2. Create a Javascript Form Field; 

Instructions

Before you try to create something a bit more advanced you have to understand how Contact Enhanced works, therefore I suggest you to create a form and test most of it's features before you continue; Also, please take a look at the online documentation.

Understanding the code:
Each Form Field will add a block of code similar to the HTML below, where radio_field_alias is the Radio button Form Field alias.

<div id="ce-cf-container-fieldId" class="ce-cf-container cf-type-fieldType">
<label class="cf-label requiredField" for="alias>fieldName</label>
<input id="radio_field_alias" class="inputbox required" name="radio_field_alias" type="text" value="" />
</div>

Usage

In the Javascript Form Field add this code below, just change field_alias1 and field_alias2   for the fields you want to make required and change the RADIO_FIELD_VALUE for the value you want from the radio button. 

jQuery(document).ready(function($){
    var fieldArray = ['field_alias1','field_alias2'];
	$( "input[name=radio_field_alias]" ).on( "change", function() {
$.each( fieldArray, function( index, value ) { if($(this).val() == 'RADIO_FIELD_VALUE'){ $('#'+value).addClass('required'); }else{ $('#'+value).removeClass('required'); } }); }); });

 

 

 

For CE 2.5.x and older versions

We'll use the MooTools (javascript) framework for this, so in case you want understand the inner works and you are not familiar with MooTools (the default javascript framework in Joomla) you need to do some reading: http://docs.mootools.net/

Implementing:

  1. Add all fields that you will need;
  2. Add the javascript below to the Attributes field, change alias_1 and alias_2 for the field aliases that you want to make required, for example: var fieldArray = [field_alias_for_cf_10,field_alias_for_cf_11,field_alias_for_cf_12]; 

Attributes:

onchange="
var fieldArray = [alias_1,alias_2];
if(this.getProperty('value')== '
OPTION 1'){
fieldArray.each(function(item, index){
field = document.id(item);
field.addClass('required');
});
}else{
fieldArray.each(function(item, index){
field = document.id(item);
field.removeClass('required');
});
}"