How to validate and set require for radio groups (Solution)

Suite and Optimus Suite 5
#1

Firstly my example is for horizontally displayed radio groups and second it may not be elegant but it works. Hopefully there will be a native way of accomplishing this in the future.

  1. Build your radio group like this with a name, value, classname and required attributes. (XML example but JSON would work to) the required attribute is needed as it will cause the template text to go red on validation as it has not value
<item type="block" name="radiogroupBlock" width="300">
    <item type="template" label="Radio Group:" name="radiogrouplabel" className="radiogrouplabel" value="" required="true" />
    <item type="newcolumn" />
    <item type="radio" name="group" label="Option 1:" value="1" />
    <item type="newcolumn" />
    <item type="radio" name="group" label="Option 2:" value="2"  />
</item>
  1. In your JS file where you load the form structure attach an “onChange” event
myForm.attachEvent("onChange", function (name, value){
    switch(name){
        case "group": 
            // gets the template element from the DOM that we used in place of a label
            var radiobuttonlabel = document.getElementsByClassName("radiobuttonlabel");
            // sets a value in that template element so that when form validation runs the text will not go red any more
            radiobuttonlabel[0]._value = '1';
        break;
        default:
            // put error handler here
    }
});

So what we did was setup an “onChange” event to fire when any radio button in the group was clicked and then set the value of the template element we used instead of a label to 1 but any value would do as we will not be using it.

The “onChange” event can also be used to carry out other functions. For example in my form I have a few radio groups and some of them are disabled until a specific option in one of the other radio groups is clicked.

The code to enable or disable a radio group is as follows. please note the group must be in a block as its actually the block that is being enabled and disabled.

if(value == 1){
    myForm.enableItem("radiogroupBlock2");
} else {
    myForm.disableItem("radiogroupBlock2");
}

and this code would go into the “onChange” event and you must give the block you want to enable or disable a name attribute.

Hope you find this usefull.

#2

Thanks, I have been looking for such a solution for quite some time now.