Struts2 s:label issue

Question

We need to display only 1 of the labels depending on condition. This is done through Javascript. That works fine, but the issue is we get a 508 compliant error saying 1 form element has 2 labels. The issue is with "for" in the table. Removing it also shows a 508 error. I tired to change the second label for to for="org.dateOfReg", but still the same. Is there a way to have only 1 label and pass the "for" and "name" values dynamically from javascript? Or is there any other option? Please help. Appreciate it a lot.

    <tr id="showDates">
       <td id="TypeDate1"><s:label for="dateOfReg" name="dateofReg" value="Date of Interest" /><span class="required" >*</span> :</td>  
       <td id="TypeDate2"><s:label for="dateOfReg" name="dateofReg" value="Date of Completion" /><span class="required" >*</span> :</td>                                     
      <td id="typeDatePick">
        <sj:datepicker showButtonPanel="true" id="dateOfReg" name="org.dateOfReg" displayFormat="mm/dd/yy" label="Date of Interest" changeMonth="true" changeYear="true" size="7"/>
       </td>
  </tr>

Thanks

Harry

If you want to display the label via JavaScript then *only* display the label via JavaScript. Just hiding a DOM element doesn't *remove* the DOM element. Build the label dynamically, or set the value of a single label dynamically. — Dave Newton, May 22 '13 at 13:54
Thanks Dave. Do you have a simple sample on how to build the label dynamic from js please? Thanks — Harry, May 22 '13 at 13:59
Same way you build any DOM element in JS, although I'd use a support library like jQuery or whatever you prefer. — Dave Newton, May 22 '13 at 14:01

score 0 · Answer 1 · answered Dec 04 '13 at 19:57

Here is what you can do to resolve this. Just have one label and change its innerHTml using JavaScript instead of hiding the label.

<tr id="showDates">
    <td id="TypeDateLabel"><s:label for="dateOfReg" name="dateofReg" value="Date of Interest" /><span class="required" >*</span> :</td>  
    <td id="typeDatePick">
        <sj:datepicker showButtonPanel="true" id="dateOfReg" name="org.dateOfReg" displayFormat="mm/dd/yy" label="Date of Interest" changeMonth="true" changeYear="true" size="7"/>
    </td>
</tr>
<script language="javascript">
    function TriggerToChangeLabel(triggerCondition)
    {
        if (triggerCondition)
            $("dateOfReg").innerHtml = "Date of Interest";
        else
            $("dateOfReg").innerHtml = "Date of Completion";
    }
</script>

But keep in mind that even though it makes the code 508 compliant; Dynamically changing the label text goes against the spirit of the accessibility. Better way to implement the same is it to have two date fields ("Date of Interest" and "Date of Completion"). Upon submission enforce "required" edit on one of the field based on the condition you have for the label change.

Struts2 s:label issue

1 Answers1