Как проверить определенное поле ввода на основе значения select-option? - PullRequest
Новая
       36

Как проверить определенное поле ввода на основе значения select-option?

0 голосов
/ 24 мая 2019

У меня есть форма 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, где я отображаю: нет, некоторые поля основаны на выпадающем менювыберите

Например:

Если выбрана опция 1, то будут отображаться только длина и ширина, остальное отображается: нет.

Если опция 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>

Как я могу использовать его для поля выбора опции?

...