For our customer we need to use forms with pagination (every forms have multiple pages which are shown/hidden by simple JavaScript). This is all implemented and works. However before a customer goes to the next page we have to validate the form elements in the current page. We validate all forms within a webpage using the following event listener:

(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(form).trigger('mdFormValidationErrors')
                } else {
                    $(form).trigger('mdFormValidationSuccess')
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false); })();

In case everything works we send the form to the server using Ajax. Now the problem is that the customer insists in a solution where the elements are validated on a per page basis (such that a user can not continue until all elements in the current page are successfully validated.

Therefore we can not continue with the form.checkValidity() function which is described in the documentation, we need a possibility to trigger the validation of single elements within the form manually. Which JavaScript / jQuery function do I need in order to validate the following MDBootstrap inputs manually (one by one)? I tried checkValidity() on single inputs / selects but this gives an error.

Sample element 1:

<div class="cform-element-text">
    <input type="text" id="mzpradukhygujarerofj_form_element_20" name="form_element_20" class="form-control" required="required">
    <label for="form_element_20">Vorname *</label>
    <div class="valid-feedback">
        Hi
    </div>
    <div class="invalid-feedback">
        There
    </div>
</div>

Sample element 2:

 <div class="cform-element-select">
        <select id="fabgixrsrkeqvqmrlemw_form_element_29" name="form_element_29" class="mdb-select">
            <option value="" disabled selected>Was wünschen Sie?</option>
            <option value="present">Ein Geschenk</option>
            <option value="view">Schöne Aussicht</option>
        </select>
        <div class="valid-feedback">

        </div>
        <div class="invalid-feedback">
            This value is not valid
        </div>
    </div>