How to set minimum length for form input with JQuery inputmask?

Question

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 settled with using another simpler plugin and keeping minlength/maxlength in the input tag. Igor Escobar's JQuery Mask Plugin .

Answer 1

have you thought about using the onincomplete, you could make a function to show a div, or tooltip or an alert. NoTe, this is just a quick and dirty example:

 let isvalid = false; $("#tooltip").hide(); $('#id').inputmask({ mask: "*{8}-*{4}-*{4}-*{4}-*{12}", definitions: { '*': { validator: "^[0-9a-f]" } }, casing: "lower", onincomplete: function() { isvalid = false }, oncomplete: function() { isvalid = true } }); $("#form").submit(function(e) { if (!isvalid) { $("#tooltip").show(); let tooltip = setInterval(function() { clearInterval(tooltip); $("#tooltip").hide(); }, 3000); e.preventDefault(); return } $("form").submit(); });

 #tooltip{ display: none; position: absolute; cursor: pointer; left: 100px; top: 50px; border: solid 1px #eee; background-color: #ffffdd; padding: 10px; z-index: 1000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script> <form id="form"> <p><input type="text" name="id" id="id" class="id" size="50" minlength="32" required /> * 32 characters</p> <div id="tooltip"> please enter at least 32 characters. </div> <input type="reset" value="reset" onclick="resetForm()"> <input id="submit" type="submit" value="Submit" /> </form>

It seems the input mask doesn't play well with the jquery UI tooltip when using minlength, I hope this helps

Answer 2

Actually now that i think about it there is an easier way

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"> <form id="form" name="form"> <p><input type="text" name="id" id="id" class="id" size="50" minlength="32" required /> * 32 characters</p> <input type="reset" value="reset" onclick="resetForm()"> <input id="submit" type="submit" value="Submit" /> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"> </script>