liferay - 如何使 AUI 验证仅在选中复选框时应用？

Question

我在 aui 表单中有一些字段，我只想在选中相应的复选框时需要这些字段，否则不需要它们。我将使用 <aui:script> 启用这些输入字段一旦启用该复选框，只有 aui 验证才可以工作。

我尝试隐藏 <aui:validator>取决于脚本中的条件。

只有在 aui 中选中我的复选框时，如何启用验证？

<aui:form action="" method="post">
<aui:input type="checkbox" name="employeeId" id="employeeId"></aui:input>

<div id="employeeDetails">
    <aui:input type="text" name="name" id="employeeId2">
        <%
            if (true) { //default i kept true how to check this condition on check box basic
        %>
        <aui:validator name="required"'  />
        <%
            }
        %>
    </aui:input>
    <aui:input type="text" name="email" id="employeeId3">
        <%
            if (true) {
        %>
        <aui:validator name="required" />
        <%
            }
        %>

    </aui:input>
</div>
<aui:button-row>
    <aui:button type="submit" />
</aui:button-row>
</aui:form>

<aui:script>
AUI().use('event', 'node', function(A) {
   A.one('#employeeDetails').hide(); // to hide div by default

   var buttonObject = A.all('input[type=checkbox]');
   buttonObject.on('click', function(event) {
     if (A.one("#<portlet:namespace/>employeeId").attr('checked')) { 
        A.one('#employeeDetails').show(); //for checked condition
     } else {
        A.one('#employeeDetails').hide(); // for non checked condition
     } 
   });
});
</aui:script>

引用图片:

启用复选框之前

[ ]

启用复选框:

[ ]

Answer 1

这个示例 if(true) 让我很困扰 - 它是在 JSP 的服务器端进行评估的，并且不会产生任何效果，因为 true始终为true。

但是，您的问题在Liferay's documentation中有详细记录。 :查找“有条件需要字段”

Sometimes you’ll want to validate a field based on the value of another field. You can do this by checking for that condition in a JavaScript function within the required validator’s body.

Below is an example configuration:

<aui:input label="My Checkbox" name="myCheckbox" type="checkbox" />

<aui:input label="My Text Input" name="myTextInput" type="text">
  <aui:validator name="required">
    function() {
      return AUI.$('#<portlet:namespace />myCheckbox').prop('checked');
    }
  </aui:validator>
</aui:input>