I have a form in Semantic UI (no react) with a select / dropdown that is required. But when users trying to send the form without having selecting something from the dropdown, the form is not showing an error message and the submit button is not working.
Like for other fields I would love to have an error message or at least mark the field red.
<script>
$(document).ready(function(){
$('select.dropdown').dropdown();
$('.ui.form').form({
fields: {
timeframe: {
identifier: 'timeframe',
rules: [
{
type : 'empty',
prompt : 'Please select a timeframe'
}
]
},
}
});
});
</script> <script src="/static/semantic/components/transition.js"></script>
<script src="/static/semantic/components/dropdown.js"></script>
<form method="POST" enctype="multipart/form-data" class="ui form">
<input type="hidden" name="csrfmiddlewaretoken" value="XXXX">
<div class="ui two column grid">
<div class="row">
<div class="ten wide column">What's the timeframe?</div>
<div class="six wide column">
<select name="timeframe" class="ui dropdown" placeholder="What's the timeframe?" required id="id_timeframe">
<option value="" selected>---------</option>
<option value="1">last month</option>
<option value="2">last quarter</option>
<option value="3">unknown</option>
</select>
</div>
</div>
...
<div class="ui error message"></div>
...
</form>On the console I see the following error:
[Error] An invalid form control with name='timeframe' is not focusable.