[SalesForce] Show error when user has entered value and removed it or field is empty while submitting the form in SLDS

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.

enter image description here

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.

Related Topic