javascript - 在 Visualforce 页面中的字段下方添加错误消息

Question

我的表单中有两个字段。我在第一个字段上使用 javascript 应用了各种自定义验证。因此，如果用户输入的值未通过验证，我想在字段下方显示错误消息。但这里的问题是用户可以添加使用可用的“添加行”按钮可以添加任意多的行。因此，假设用户添加 3 行。并且错误在第二行中，“错误值”消息应显示在第二行字段的正下方。以下是部分我的代码在表单中。那么我如何仅使用 javascript 显示错误(不使用 Controller 类)。请帮忙。

                                                  <apex:outputPanel id="List">
                                                        <div id="repayid">
                                                            <table style="width:100%;display: block;overflow: scroll;" id="Table">
                                                                <tr id="Tabletr1">

                                                                    <td class="A">Alpha No</td>

                                                                    <td class="A">BetaText</td>


                                                                </tr>

                                                                <apex:repeat value="{!List}" var="rep" id="addrow">
                                                                    <tr id="repayTabletr2">


                                                                        <td id ="tdid">
                                                                            <apex:inputField value="{!rep.S_Code_No__c}" id="barid" style="width:100%;"/>
                                                                            <div style="color:red; background-color:white;">
                                                                            <p  class="SError" style="display:none;">Error Value </p>
                                                                            </div>
                                                                        </td>

                                                                        <td>
                                                                            <apex:inputField styleClass="RequiredField" value="{!rep.C_Code__c}" style="width:100%;"/>
                                                                            <div style="color:red; background-color:white;"></div>
                                                                        </td>
                                                                     </tr>
                                                                </apex:repeat>
                                                            </table>
                                                        </div>

Answer 1

您必须循环访问 JavaScript 函数中的输入字段。迭代每个字段时，您将获得该字段的 ID。

使用 javascript 和 CSS，您可以在出现错误的输入下方插入一个新的 DIV，然后可以在该 DIV 中设置样式并显示错误消息。

或者，您可以在重复标记内添加一个空 DIV，然后如果发现错误，可以向其中添加样式/添加 innerHTML。