I'm using RobinHerbots' input mask to set my UUID input. It all works, but I want to retain the HTML message when the input does not have x numbers of characters and the submit button is clicked. HTML alert

I don't like clearIncomplete: true because it deletes partial inputs.

My submit button triggers an event and sends a request to the server using fetch.

Here's my current code:

   $(document).ready(function(){
        $('.id').inputmask({
            mask: "*{8}-*{4}-*{4}-*{4}-*{12}",
            definitions: {'*': {validator: "[0-9a-f]"}},
            casing: "lower",
            removeMaskOnSubmit: true,
            // clearIncomplete: true
        });
    });

HTML:

<form action="" id="form">
    <p><input type="text" name="id" id="id" class="id" size="50" required /> * 32 characters</p>
    <input type="reset" value="reset" onclick="resetForm()">
    <input type="submit" value="divert" />
</form>

EDIT: I can't figure out how to do it. I settle with using another simpler plugin and keeping minlength/maxlength in the input tag. Igor Escobar's JQuery Mask Plugin.