Why invalid-feedback in thymeleaf not working

Question

I required input it's work but why invalid-feedback not show in modal HTML use thymeleaf

<!-- AddStore Modal -->
<div class="modal fade" id="AddUserModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddUserModalLabel">Add Store Form</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form autocomplete="off" action="#" th:action="@{/stores/add_store}"
                      th:object="${store}" method="post"
                      role="form" id="addModalForm">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="addstoreName">Store Name</label>
                            <input type="text" class="form-control" id="addstoreName" th:field="*{storeName}"
                                   required="required"/>
                            <div class="invalid-feedback">
                                Please provide a store name.
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="addStatus">Status</label>
                            <select id="addStatus" class="form-control" th:field="*{status}">
                                <option th:value="Ready_to_service">Ready to service</option>
                                <option th:value="Temporarily_closed">Temporarily closed</option>
                                <option th:value="Closed">Closed</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                        <button class="btn btn-success" type="submit" th:text="Save"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

Not sure if you found the solution or not as it looks like an old question.

You are missing to let Thymeleaf know about the field specific error. You havn't bind the invalid-feedback class to the "field" error. Try below piece of code.

<input type="text" class="form-control" id="addstoreName" th:field="*{storeName}" required="required"/>
<div class="invalid-feedback" th:if="${#fields.hasErrors('storeName')}" th:errors="*{storeName}"></div>

Take a look at the working example here. Here it will look like this: