使用 jQuery 验证插件根据下拉字段中的选定响应创建一个必填字段

Question

这是我第一次使用 jQuery，我迫切需要一些帮助。

我在 visualforce 页面 (Salesforce) 上有一个表单，我正在尝试使用 jQuery 验证插件进行验证。我有一些隐藏的字段，除非用户从下拉框中选择“是”。新字段要求提供更多详细信息，并且在呈现时应该是必需的。

问题是，我不知道如何编写当下拉菜单为“是”时返回true的函数

我试过这个没有成功：

j$('[id$=newDGRecord]').validate();     
j$('[id$=InsuranceHistory]').rules("add",{
                required: true
            });

j$('[id$=insuranceRiskHistory]').rules("add",{
                required: function() {
                  return j$('[id$=InsuranceHistory]').val() == "Yes";
                    }
                });

相关的视觉力标记是：

<div class="form-group required">
                                <apex:outputLabel value="Insurance History" for="InsuranceHistory" styleClass="control-label col-sm-2" />
                                <div class="col-sm-10">
                                    <apex:outputText >
                                        <p>Have you, your business, or anyone else named on this form ever had insurance declined, cancelled or refused? </p>
                                    </apex:outputText>
                                    <apex:inputField value="{!Dumping_Grounds__c.Insurance_Declined_or_Cancelled__c}" styleClass="form-control" id="InsuranceHistory" >
                                      <apex:actionSupport event="onchange" rerender="insurancepanel"/>
                                    </apex:inputField>
                                </div>
                            </div> 
                            <apex:outputPanel id="insurancepanel">
                                  <apex:outputPanel rendered="{!IF(Dumping_Grounds__c.Insurance_Declined_or_Cancelled__c = 'Yes', true,false)}" id="insuranceRisk">
                                      <apex:outputLabel value="More Details" styleClass="control-label col-sm-2" for="insuranceRiskHistory"/>
                                      <div class="col-sm-10">
                                        <p>Please provide additional details.</p>
                                        <apex:inputField value="{!Dumping_Grounds__c.Insurance_History__c}" styleClass="form-control" id="insuranceRiskHistory"/>
                                      </div>
                                   </apex:outputPanel>
                            </apex:outputPanel> 

谁能帮我解决这个问题？看起来很简单，但我迷路了。

Answer 1

您正在使用“以”结尾选择器，$= ...

j$('[id$=InsuranceHistory]')

因此，您的选择器可能包含多个项目。

然而，使用 jQuery Validate 插件，它的方法只适用于组中的 first 项。因此，您需要使用 .each() 将该方法应用于所有项目...

j$('[id$=InsuranceHistory]').each(function() {
    j$(this).rules("add", {
        required: true
    });
});

---

“我不知道如何编写函数来在下拉为'Yes'时返回true”

您将使用the depends property 编写一个函数。

required: {
    depends: function(element) { // element is the object being evaluated
        // your conditional
        // return true to activate the 'required' rule
    }
}

我看不到您的 HTML 标记，也不知道您为什么在所有内容上都使用“以结尾”选择器，因此我无法构建准确的工作代码。

我也不确定您为什么使用.rules('add') 方法来声明规则。你的.validate() 方法在哪里，为什么不能使用？