如何根据select-option值验证某些输入字段？

Question

我有一个aui表单，我有一个下拉列表（Select-Option）和5个输入字段，如下所示：

<aui:form action="${submitFormUrl}" method="post" name="fm" id="aui-form">
            <!-- Name -->

            <div class="form-group">              
                <aui:select class="form-control" name="dropdown"> 
                    <aui:option value="1">Option 1</aui:option>
                    <aui:option value="2">Option 2</aui:option>
                    <aui:option value="3">Option 3</aui:option>
                </aui:select>      
            </div> 

            <br>

            <div id="lenght" class="form-group">
                <aui:input name="lenght" label='<span class="col-form-label">lenght:</span>' type="text" cssClass="form-control">
<aui:validator name="required" errorMessage='Please Fill this field.' />
                </aui:input>         
            </div>

            <div id="width" class="form-group">
                <aui:input name="width" label='<span class="col-form-label">Width:</span>' type="text" cssClass="form-control" >
<aui:validator name="required" errorMessage='Please Fill this field.' />
                </aui:input>  
            </div>
            <!-- Depth-->
            <div id="Depth" class="form-group">
                <aui:input name="depth" label='<span class="col-form-label">Depth:</span>' type="text" cssClass="form-control">
<aui:validator name="required" errorMessage='Please Fill this field.' />
                </aui:input>  
            </div>

            <div id="cm" class="form-group">
                <aui:input name="cm" label='<span class="col-form-label">Cubic Meter:</span>' type="text" cssClass="form-control"">
<aui:validator name="required" errorMessage='Please Fill this field.' />
                </aui:input>       
            </div>




            <div class="text-right mb-4">
                <button id="submit" type="submit" class="btn btn-lg btn-block btn-default">Submit</button>
            </div>
        </aui:form>

我还有一个javascript代码，我显示：没有一些基于下拉选择的字段

例如：

如果选择了Option1，则仅显示长度和宽度，其余为display：none。

如果选项2显示前3个字段，则隐藏立方米字段。

和

我使用了<aui:validator name="required" errorMessage='Please Fill this field.' /> <aui:validator name="required" errorMessage='Please Fill this field.' />但问题这一点。

当我点击提交按钮时，我无法从我的表单中获取给定值，然后我意识到验证器甚至尝试验证隐藏的字段。因此表单无法提交

在liferay文档中，我发现了一个叫做条件验证器的东西，我想这就是我需要的东西

<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>

如何将其用于选择选项字段？