Boostrap Validator

Question

Great, I’m trying to make a Validator with Boostrap but it’s not working. I want the weight input to be for example : 70 kg. regex I think it’s working but when I give Ubmit, div.invalid-feedback does not appear

<input class="form-control" type="text"  name ="peso" pattern="(\d*\.?\d+)\s*(lbs?|kg)" required placeholder="Peso" data-error="Isso nao é kg">
                                <div class="invalid-feedback">Isso não é kg</div>

Thank you

Answer 1

@Jorgeferreira failed to insert the class help-block with-errors which uses the error generated by data-error="Isso nao é kg"

$(document).ready(function(){
  $("form").submit(function(){  
  var input_peso = $('#peso').val();
  console.log(input_peso);
  return false;
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form name="form" data-toggle="validator" role="form" action="#">
<div class="form-group">
    <label for="peso" class="control-label">Peso:</label>
  <input id="peso" class="form-control" type="text" name="peso" pattern="^\d+(?:\.\d+)?\s*(?:kg|lbs|t)$" required placeholder="Peso" data-error="Isso nao é kg">
 <div class="help-block with-errors"></div>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>