How do I validate required on drag-n-drop file-upload in a form?

I want to submit drag-n-drop file-upload data with form submit button click. I tried adding required to the input and the validation fails but I couldn't retrieve any feedback.

I need feedback similar to when I drag-n-drop wrong filetype or file-size, where the errors are overlayed on the input.

The code I'm using after multiple "hack and fail" is below, code is modified to hide unrelated features (Edited):

<form action="/my-submission-path" class="needs-validation" method="post" enctype="multipart/form-data" id="formCreate" novalidate>
    <div class="row">
        <div class="col-md-2 mb-4">
            <div class="md-form">
                <div class="file-field pt-2">
                    <div class="file-upload-wrapper z-depth-1-half mb-4">
                        <input class="file-upload" type="file" accept="image/*" name="back_cover" id="back_cover" data-height="200" data-max-file-size="2M" data-default-file="Image" required>
                    </div>
                    <div class="invalid-feedback">Required</div>
                </div>
                <label for="back_cover" class="text-light-blue-grey mb-2 active">Back Cover<span class="text-danger">*</span>
                    <a class="text-primary px-2" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="{{ __("Recommended dimensions: 512 pixels x 910 pixels portrait image.") }}">
                        <span><i class="fas fa-question fa-sm"></i></span>
                    </a>
                </label>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-sm-6 mb-4">
            <div class="md-form">
                <input type="email" class="text-primary form-control pt-2" id="email" name="email" autocomplete="new" required>
                <label for="email" class="text-light-blue-grey mb-2">Email Address<span class="text-danger">*</span></label>
                <div class="invalid-feedback">Please enter a valid email.</div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <button type="button" class="btn imano-light-gradient btn-rounded btn-create" id="submitButton" data-toggle="modal" data-target="#confirmCreateDialog">
                <span class="spinner-border spinner-border-sm btn-progress" role="status" aria-hidden="true"></span>
                <span>Create</span>
            </button>
        </div>
    </div>
</form>

I'm submitting the form data with ajax after the the confirmation dialog is hidden by confirmation. My submission JS script:

$(".file-upload#banner").file_upload({
    allowedFileExtensions: ["png", "jpg", "jpeg"],
    messages: {
        remove: "",
        error: "Ooops, something went wrong."
    }
});

<script type="text/javascript">
$("#confirmCreateDialog .btn-confirm").on("click", function (event) {
    event.preventDefault();

    $("#confirmCreateDialog").one("hidden.bs.modal", function (e) {
        e.preventDefault();

        let form = document.getElementById("formCreate");
        form.classList.remove("was-validated");

        if (form.checkValidity() === false) {
            form.classList.add("was-validated");
            e.stopPropagation();
            return;
        }
        $(".is-invalid").removeClass("is-invalid");

        $("#submitButton").prop("disabled", true).find("span:last").text("Creating...");

        let data = new FormData($(form)[0]);

        $.ajax({
            type: "POST",
            dataType: "json",
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            enctype: "multipart/form-data",
            context: this,
            url: $("#formCreate").attr("action"),
            success: function () {
                $("#successDialog .dialog-message").html("<p>Success message here.</p>");
                $("#successDialog").one("shown.bs.modal", function () {
                    window.location.href = "./"; //Go one step back.
                }).modal("show");
            },
            error: function (xhr) {
                let response = xhr.responseJSON;
                if (xhr.status === 422) {
                    showInvalidElements(form, response.errors);
                } else {
                    const message = craftErrorMessage(response);

                    $("#errorDialog .dialog-message").html(message);
                    $("#errorDialog").modal("show");
                }
            },
            complete: function () {
                $("#submitButton").prop("disabled", false).find("span:last").text("Create");
            },
        });
        form.classList.add("was-validated");
        e.stopImmediatePropagation();
    }).modal("hide");
});
</script>