选择下拉字段的语义UI自定义规则验证

Question

我正在尝试向我的语义ui验证添加一些自定义逻辑，但无法弄清楚我在做什么错。

[基本上，当用户从下拉菜单中选择“是”时，我想使“ input_field”成为强制性。如果用户选择“否”，则“ 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>