Validate field when moving to another field

Question

Validate field when moving to another field

Navigation

#1 by (1 votes)

0

I have the following fields:

IntheseareregisteredthevaluesallowedbythePostOfficetocalculatethefreight.AlthoughIlimitedthefieldstoacceptedvalues:

<divclass="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 less than the higher than allowed, an automatic message will appear, without the need to click on the "Save" button.

javascript jquery

asked by anonymous 09.11.2017 / 20:43

1 answer

List manipulation with dictionary within a loop in Python Types of records repeated in filter

score 1 · Accepted Answer

This code will work only on inputs type 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><linkrel="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>