Проверка пользовательского правила семантического пользовательского интерфейса для выпадающего поля Select

Question

Я пытаюсь добавить пользовательскую логику в мою проверку семантического пользовательского интерфейса, но не могу понять, что я делаю неправильно.

В основном, когда пользователь выбирает «Да» из выпадающего списка, я хотел бы сделать «входное поле» обязательным. Если пользователь выбирает «Нет», поле «input_field» становится необязательным, и форму можно отправить.

Я пытался искать примеры и следовал некоторому коду с веб-сайта Semantic Ui, но не могу понять, кто яотсутствует. Буду признателен за любой совет, так как я нахожусь на крайнем сроке для проекта, над которым я работаю.

Форма:

<div class="ui dimmer">
    <div class="ui huge text loader">Loading</div>
  </div>
<form method="post" action="" class="ui form" autocomplete="on">                 
    <div class="ui segment">
        <div class="ui two fields">
            <div class='field'>                                   
                <div class="ui selection dropdown">
                    <input type="hidden" class="selectOption" name="select">
                    <i class="dropdown icon"></i>
                <div class="default text">Select an option</div>
                <div class="menu">
                    <div class="item" data-value="Yes">Yes</div>
                    <div class="item" data-value="No">No</div>
                </div>
                </div>                                     
            </div>
            <div class="field">                                   
                <input id="input_field" name="input_field" type="text"/>                                        
            </div>  
        </div> 
    </div>
<button id="submit" class="ui green button" name="submit" type="submit">Submit</button>
</form>

Validation:

<script>
$('.ui.form').form({
    keyboardShortcuts: false,
    on: 'blur',
    inline: 'true',
    fields: {
    selectOption: {
            identifier: 'select',
            rules: [
                {
                type: 'empty',
                prompt: 'Please select an option'
            }]
    },
    input_field: {
            identifier: 'input_field',
            depends: 'select',
            rules: [
                {
            type: 'empty',
            prompt: function() {
                $('.select').on('change', function() {
                if( this.value == 'Yes') {
                    return "Custom Validation";
                }
                return false;
            }).trigger("change"); 
            }
            }]
    }
    },
    onSuccess: function() {
        $('.ui.dimmer').dimmer('show');
    },
    onFailure: function() {
        event.preventDefault();
    }
}            
); 
});
</script>

Answer 1

Разобрался с решением для этого! Возможно, это не лучший ответ, но он работает и делает то, что я ищу.

<div class="ui dimmer">
    <div class="ui huge text loader">Loading</div>
  </div>
<form method="post" action="" class="ui form" autocomplete="on">                 
    <div class="ui segment">
        <div class="ui two fields">
            <div class='field'>                                   
                <div class="ui selection dropdown">
                    <input type="hidden" class="selectOption" name="select">
                    <i class="dropdown icon"></i>
                <div class="default text">Select an option</div>
                <div class="menu">
                    <div class="item" data-value="Yes">Yes</div>
                    <div class="item" data-value="No">No</div>
                </div>
                </div>                                     
            </div>
            <div class="field">                                   
                <input id="input_field" name="input_field" type="text"/>                                        
            </div>  
        </div> 
    </div>
<button id="submit" class="ui green button" name="submit" type="submit">Submit</button>
</form>

<script>
$('.ui.form').form({
    keyboardShortcuts: false,
    on: 'blur',
    inline: 'true',
    fields: {
    selectOption: {
            identifier: 'select',
            rules: [
                {
                type: 'empty',
                prompt: 'Please select an option'
            }]
    }
    },
    onSuccess: function() {
        $('.ui.dimmer').dimmer('show');
    },
    onFailure: function() {
        event.preventDefault();
    }
}            
); 

$('.selectOption').on('change', function() {
if ( this.value == 'Yes' ) {
  $('.ui.form').form('add rule', 'input_field', ['empty', 'integer']);
  $('.ui.form').form('add prompt', 'input_field', 'Enter an integer');
}
if ( this.value == 'No' ) {
  $('.ui.form').form('remove prompt', 'input_field');
  $('.ui.form').form('remove rule', 'input_field');
}
}).trigger("change");

});
</script>