I am using the SLDS in visualforce page and trying to display error next to the component by following this.

But aria-describedby does not work with <Apex:inputfield> and throws error.

Here's the code,

 <div class="slds-form__row">
     <div class="slds-form__item" role="listitem">
         <div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-has-error">
             <label class="slds-form-element__label" for="stacked-form-element-id-01">
             <abbr class="slds-required" title="required">* </abbr>{!$ObjectType.Case.fields.Billing_EFT_Action__c.Label}</label>
                 <div class="slds-form-element__control">
                     <apex:actionRegion >
                         <apex:inputfield value="{!caseObj.Billing_EFT_Action__c}" id="billingaction" aria-describedby="form-error-01" styleClass="slds-input">
                            <apex:actionSupport event="onchange"  rerender="buttons" />
              <div class="slds-form-element__help" id="form-error-01">This field is required</div>

If I change the <apex:inputfield> to <input>, I lose the functionality of using the formula expression to fetch the value directly from the controller. Also, I need to be able to call the JS function and reRender an output panel onChange of the field value. Is there any way to show the error right below the field using slds with OR I am better of using the <input> and then call JS function onchange and then render the Output panel using action function from JS?


You can use pass through custom attributes to place the attribute:

<apex:inputField html-aria-describedby="form-error-01" ... />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.