On click of a button, I want to dynamically add 'slds-has-error' class to a div around an element.

My markup is as:

<apex:form id="theForm">

            <!-- divContainer -->
            <div id="divContainer" class="slds"> 
                <div class="slds-m-around--medium">
                    <div class="slds-form-element__group">
                        <!-- Document Type -->
                        <div class="slds-grid slds-m-bottom--large">                                                          
                            <div id="errorDivPicklist" class="slds-form-element slds-size--1-of-2 slds-p-right--x-small">
                                <span class="slds-required" title="required">*</span><label class="slds-form-element__label" for="ddlDocumentType">{!$Label.DOCUMENT_TYPE_LBL}</label>
                                <div class="slds-form-element__control">
                                    <div class="slds-select_container">
                                        <apex:selectList id="ddlDocumentType" styleClass="slds-select" value="{!documentType}" size="1" required="true">
                                            <apex:SelectOption itemValue="" itemLabel="{!$Label.Select}"/>
                                            <apex:SelectOptions value="{!documentTypes}"/>
                                <div class="slds-form-element__help slds-hide" id="error-message-picklist-id">This field is required</div>
                            <div class="slds-form-element slds-size--1-of-2 slds-p-left--x-small">
                                <span class="slds-required" title="required">*</span><label class="slds-form-element__label" for="txtFileName">{!$Label.FILE_NAME_LBL}</label>
                                <div class="slds-form-element__control">
                                    <apex:inputText styleClass="slds-input" id="txtFileName" value="{!fileName}" onchange="onFileNameChange(this);" required="true"/> 

On click of a button JS function is called:

function validateRequiredFields(){
        var documentType='{!documentType}';

        alert('Inside validateRequiredFields: ');

        if(documentType === '' || documentType === null || documentType === undefined){
            alert('Inside value empty: ');
            document.getElementById(errorDivPicklist).className += ' slds-has-error';
            document.getElementById(error-message-picklist-id).className -= ' slds-hide';            
            alert('Inside filled');
            document.getElementById(errorDivPicklist).className -= ' slds-has-error';
            document.getElementById(error-message-picklist-id).className += ' slds-hide';

Appropriate alerts are triggered when apex:selectList is empty. But the class is not applied to that element. What can be reason for this? When manually applied through code, the style is applied and red border is shown.

  • 1
    for future reference, please include any console errors (or mention if there aren't any). thanks!
    – glls
    Aug 9 '17 at 13:20

My guess is that you are not passing the class name attribute as a string,

the documentation for getElementById specifies this:

elementID String Required. The ID attribute's value of the element you want to get

if you check your console, i'm pretty sure you will see something wihtin the lines of:

Uncaught TypeError: Cannot read property 'className' of null

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.