1

I am trying to show basic validation error on each row of input text oncheck of checkbox.Initially it is displaying error correctly below the 1st field but if i check 2nd checkbox in table its displaying message under 1st cell.

 <tbody id="co-storebody">                      
     <tr style="display:none;">
         <apex:repeat value="{!speCondscValues}" var="speConds" >
             <apex:variable var="index" value="{!index +1}" />
                 <tr>
                     <td>
                         <div>{!index}</div>
                     </td>
                     <td>
                         <div>{!speConds}</div>
                    </td>
                    <td>
                         <div><!--<apex:inputText styleClass="slds-input" style="" id="remarksVal"
                                                                                     />-->
                             <input type="text" class="slds-input" id="{!index}"/><br/>
                             <p id="error" style="color:red;"></p>
                             <!--<apex:inputHidden id="hdnRep2" value="{}"/>    -->
                         </div>

//js function This will be called on change of checkbox

Function enableRemarks(checkBox,inputId,speCond){
    var remarks = document.getElementById(inputId);//The id is dynamic
    checkObj = checkBox;
    inputValue = inputId;
    if(checkBox.checked){
        if(remarks.value == ''){
            alert('hihi');
            document.getElementById('error').innerHTML = remarks.validationMessage;  
        }
        specConds.push(speCond); 
    } else {
        specConds.splice(specConds.indexOf(speCond),1);
    }
}

2nd checkbox is checked but message is being displayed in 1st cell

2
  • 1
    document.getElementById('error').innerHTML always finds the first instance of that on the page, you need to search by inputId Feb 18, 2019 at 11:26
  • Can you tell me how.? I am not so good at Js Feb 18, 2019 at 11:37

1 Answer 1

2

document.getElementById('error') always finds the first instance of that on the page, you need to search by inputId.
You could try something like this:

 <input type="text" class="slds-input" id="{!index}"/><br/>
 <p id="{!index}error" style="color:red;"></p>

And then in your JS you could find the right error node like so:

var errorId = inputId + 'error';
document.getElementById(errorId).innerHTML = remarks.validationMessage;
1
  • 1
    Thanks it worked. But little syntax correction here,.. <p id="{!index}error" style="color:red;"></p> Feb 18, 2019 at 11:51

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.