如何根据选择选项值验证某些输入字段？

Question

我有一个aui表单，其中有一个下拉菜单（选择选项）和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，则仅显示长度和宽度，其余显示为：无。

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

和

我使用了<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>

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