如何使 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 中有详细记录：寻找 "Conditionally Requiring A Field"

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>

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

How to make AUI validation apply only when a check box is selected?

liferay

alloy-ui

liferay-aui