I have a few input fields on the layout and all of them has slds-has-error class to get the red box along the field and displaying field is required
text beneath the field.
However, my problem is, how do I only show the field is required
error if user has not added the field information on submitting the form. I need to be able to check if the field has value or not and based on that I can show/ hide the class using j$('#billingaction).removeClass(slds-has-error,true);
. The problem is, if the user submits the form, I need to be able to throw and error that the field is empty and requires value.
I referred Here to @Sfdcfox's answer. But, it's for lightning and not working for SLDS.
Here's my 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">
<div class="slds-combobox_container">
<apex:actionRegion >
<apex:inputfield value="{!caseObj.Billing_EFT_Action__c}" id="billingaction" html-aria-describedby="form-error-01" styleClass="slds-input" style="width: 150px;">
<apex:actionSupport event="onchange" rerender="buttons" />
</apex:inputfield>
</apex:actionRegion>
</div>
<div class="slds-form-element__help" id="form-error-01">This field is required</div>
</div>
</div>
</div>
Best Answer
You're showing the Visualforce code where you display the error, but you need an action/event/thing to happen so that you can evaluate the page and decide if you want to show the error or not. So you'll need a commandButton or commandLink and to combine that with some regular JavaScript that you'll call onsubmit for the commandButton. There is a smattering of sample code around the VF documentation, but you'd be better off searching Google. I have some code I just wrote, but it's for a client and it's quite long. Maybe someone else around here has an example of a commandButton calling JS, which can evaluate values and add/change div classes as necessary. I know this isn't the best answer around, but it's a beginning.