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>