I am using SLDS in a VF Page and I am referring to this link here to show error. The problem is the error is displayed on page load because I am not removing the Slds-has-error class. But, how do I check if the user has entered value or not on form submission and throw error back and stop execution of javascript?

Here's the code for my field,

<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-combobox-id-01">
                                        <abbr class="slds-required" title="required">* </abbr>{!$ObjectType.Case.fields.Billing_EFT_Current_Mode__c.Label}</label>
                                        <div class="slds-form-element__control">
                                            <div class="slds-combobox_container">
                                                <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox">
                                                    <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                                                        <apex:inputField value="{!caseObj.Billing_EFT_Current_Mode__c}" id="paymentcurrentmode"  html-aria-describedby="form-error-02" styleClass="slds-input slds-combobox__input slds-combobox__input-value" style="width: 150px;"/>
                                                    <div class="slds-form-element__help" id="form-error-02">This field is required</div>

On a button click , I am calling a validateformfields() which takes all the children of the div element and then I want to throw error if value is null or blank.

function checkfields(el){
        console.log('checking fields:');
        for (var i = 0; i < el.length; i++) {
            console.log('Element : '+el[i]);
            console.log('42 ------ Element :'+el[i].id);
            console.log('43 ------ Element Property Names :'+Object.getOwnPropertyNames(el[i]));
            var elid = el[i].id;
            console.log(' Element ID  :'+elid);
            if(elid != null && elid != '' && el[i]!=null){
               //console.log('46 ------ Id not Null, Value of the Element :'+document.getElementById(el[i].id).value);
                var elval = document.getElementById(el[i].id).value;
                console.log('46 ------ Value of the Element :'+elval);
               if(elval =='' || elval ==null  ||elval=='undefined'){
                    console.log('Returning , Value Blank');
                    //Value is Blank, Throw error here
                    //Add the slds-has-error class back and stop execution.
                    return true;



    function validateformfields(){

        //get all child element of the div
        var allel = j$('#paymentpanelfieldsdiv').children();
        console.log('All Elements of Payment Panel Div'+allel);
        console.log('All Elements values :'+Object.values(allel));


        return false;

I want to validate the if the field has value or not and then throw the error message to the user but with the slds class for look and feel? I am aware of how to do this using and controller logic with ppagereference method. I want to see how can this be achieved with JS?

Your Answer

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

Browse other questions tagged or ask your own question.