Fijn

Select field component: Invalid 

<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Type project</label>

    <select name="selectField" class="form-control cursor-pointer  is-invalid">
        <option>Select field item 1</option>
        <option>Select field item 2</option>
        <option>Select field item 3</option>
    </select>

</div>
 
<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">{{label}}</label>
    {% if avatar %}<div class="m-fieldWrap cursor-pointer position-relative w-100">{% render '@avatar' %}{% endif %}
        <select name="selectField" class="form-control cursor-pointer {% if avatar %} -pl{% endif %}{% if invalid %} is-invalid{% endif %}{% if valid %} is-valid{% endif %}" {% if disabled %}disabled{% endif %}>
            {% for item in items -%}<option>{{ item }}</option>{% endfor %}
        </select>
    {% if avatar %}</div>{% endif %}
    {% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>
 
{
  "label": "Type project",
  "items": [
    "Select field item 1",
    "Select field item 2",
    "Select field item 3"
  ],
  "disabled": false,
  "avatar": false,
  "invalid": true,
  "valid": false,
  "feedback_message": "Select field is invalid",
  "show_feedback": false
}

Validatie

When a field is invalid or valid, the class .is-invalid or .is-valid should be added to the field. If a feedback message should be displayed please look at the following example:

<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Type project</label>
    
        <select name="selectField" class="form-control cursor-pointer  is-invalid" >
            <option>Select field item 1</option><option>Select field item 2</option><option>Select field item 3</option>
        </select>
    
    <div class="invalid-feedback d-inline-block"><strong>Select field is invalid</strong></div>
</div>

It is also possible to already add the feedback div to the HTML before the message is displayed to the user. This is because the .invalid-feedback or .valid-feedback are hidden by default. By adding the class .d-inline-block it will be visible.