Tengo un formulario en la interfaz de usuario semántica (sin reacción) con una selección/desplegable que se requiere. Pero cuando los usuarios intentan enviar el formulario sin haber seleccionado algo del menú desplegable, el formulario no muestra un mensaje de error y el botón Enviar no funciona.
Al igual que para otros campos, me encantaría tener un mensaje de error o al menos marcar el campo en rojo.
<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>En la consola veo el siguiente error:
[Error] No se puede enfocar un control de formulario no válido con name='timeframe'.