Client-Side Validation before POST via HTMX

Using Django Forms & APIs
1 
<form
    id="schedule-form"
    hx-post="{% url 'myNiceURL' %}"
    hx-target="this"
    hx-swap="innerHTML"
>
    {% include "../partials/schedule-form.html" %}
</form>

which has :

<button type="submit" @click.prevent="validateForm">
    Update
</button>

But I want to do some client-side validation as well - but it looks like document.getElementById('schedule-form').submit(); is bypassing the HTMX’s functionality.

<script>
let validateForm = null;
document.addEventListener('DOMContentLoaded', () =>
{
    validateForm = () =>
    {
        
        if (!validationPassed)
        {
            alert('Invalid');
            return;
        }

        // Submit the form
        document.getElementById('schedule-form').submit();
    }
});
</script>

Is it not possible to do client-side validation and then pass the valid form across via HTMX ?

2

It appears to me that the easiest way to do this would be to tie your validation code to the htmx:beforeRequest event.