Validate field when switching to another field

Question

I have the following fields:

In them are recorded the values allowed by the Post Office to calculate the freight. Despite having limited the fields with the accepted values:

<div class="col-lg-3">
    <div class="input-group margin-bottom-sm">
        <input class="form-control" name="Largura"  type="number" min="11" max="105" placeholder="Largura" value="<?php if($_POST["Largura"]){ echo $_POST["Largura"]; }else{ echo "11"; } ?>">
      <span class="input-group-addon" style="background-color: #F8F8F8">cm</span>
    </div>
</div>
<div class="col-lg-3">
    <div class="input-group margin-bottom-sm">
    <input  type="number" min="2" max="105" name="Altura" class="form-control" placeholder="Altura" value="<?php if($_POST["Altura"]){ echo $_POST["Altura"]; }else{ echo "2"; } ?>">
        <span class="input-group-addon" style="background-color: #F8F8F8">cm</span>
</div>
</div>
<div class="col-lg-3">
  <div class="input-group margin-bottom-sm">
    <input  type="number" min="16" max="105" name="Comprimento" class="form-control"  placeholder="Comprimento" value="<?php if($_POST["Comprimento"]){ echo $_POST["Comprimento"]; }else{ echo "16"; } ?>">
        <span class="input-group-addon" style="background-color: #F8F8F8">cm</span>
    </div>
</div>
<div class="col-lg-3">
    <div class="input-group margin-bottom-sm">
     <input type="text" name="Peso" id="peso" class="form-control"   placeholder="Peso (ex: 0.300, 1.000)" maxlength="5" value="<?php echo $_POST["Peso"]; ?>" data-inputmask="'alias': '9.999'">
         <span class="input-group-addon" style="background-color: #F8F8F8">kg</span>
        </div>
</div>

I would like to know if it is possible to change the field and if the value is lower than the allowed, an automatic message appears, without the need to click the "Save" button to do so.

Answer 1

This code will only work on inputs guy number, displaying a message below the field:

$('.input-group input[type=number]').on('blur focus', function(e){
   if(e.type == 'blur'){
      var min_ = parseFloat($(this).attr('min'));
      var max_ = parseFloat($(this).attr('max'));
      var val_ = parseFloat($(this).val());
      if(val_ < min_ || val_ > max_){
         $(this).closest('.col-lg-3').append('<span class="err_msg" style="color: #f00;">O valor não pode ser inferior a '+min_+' ou superior a '+max_+'!</span>');
      }
   }else{
      $(this).closest('.col-lg-3').find('.err_msg').remove();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="col-lg-3">
    <div class="input-group margin-bottom-sm">
        <input class="form-control" name="Largura"  type="number" min="11" max="105" placeholder="Largura" value="">
      <span class="input-group-addon" style="background-color: #F8F8F8">cm</span>
    </div>
</div>
<div class="col-lg-3">
    <div class="input-group margin-bottom-sm">
    <input  type="number" min="2" max="105" name="Altura" class="form-control" placeholder="Altura" value="">
        <span class="input-group-addon" style="background-color: #F8F8F8">cm</span>
</div>
</div>
<div class="col-lg-3">
  <div class="input-group margin-bottom-sm">
    <input  type="number" min="16" max="105" name="Comprimento" class="form-control"  placeholder="Comprimento" value="">
        <span class="input-group-addon" style="background-color: #F8F8F8">cm</span>
    </div>
</div>
<div class="col-lg-3">
    <div class="input-group margin-bottom-sm">
     <input type="text" name="Peso" id="peso" class="form-control"   placeholder="Peso (ex: 0.300, 1.000)" maxlength="5" value="11" data-inputmask="'alias': '9.999'">
         <span class="input-group-addon" style="background-color: #F8F8F8">kg</span>
        </div>
</div>