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" />
                                            <div class="slds-form-element__help" id="form-error-01">This field is required</div>
  • As is, it is unclear what you are asking, where are you stuck exactly? what are you expecting as an answer? you will have to provide what you have attempted to do code-wise and describe a specific problem related to your code. – glls Apr 17 at 14:08
  • What I have mentioned is, I have an input field where in I a using SLDS classes to show errors, however the error is displayed ALWAYS. disregard of user's intervention with the field. I have already added the code that I have for the field with the SLDS class, I am trying to understand how can I hide that class or show that class OnClick of a button and if value is not present? – apple123 Apr 17 at 14:11
  • @glls I added a little more information based on what I need and what I have tried. – apple123 Apr 17 at 14:14
  • I see - however, I dont see any code that attempts to do what you are trying to achieve. Do you have a script where you check if user has updated the field? – glls Apr 17 at 14:15
  • 1
    atm its hard to give you guidance, since there is no code/logic in your post, just markup. slds is just a CSS framework, there are plenty of ways to check for field validations, you can iterate over all your fields on form submit, or add onchange handlers to your fields and do the check while users are typing, or use an onblur event, for after a field has lost focus, do the validation. =/ – glls Apr 17 at 14:26

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.

  • apprecaite you taking time to answer it. I have actually implemented something almost like what you described, I am calling a JS() on a commandbutton click and then I check for all the fields' values and if it's blank, there is a global boolean that is set to false. I check if the boolean is false, execution stops and JS adds a CSS class of slds-has-error and slds-form-element__help to all the fields where value is null. it's pretty neat implementation, I am going to soon post an answer for this one once I have a clean version. – apple123 Apr 23 at 18:23

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.