0

Boas, tou a tentar fazer uma validator com o Boostrap mas não está a funcionar. Eu quero que o input peso seja por exemplo : 70 kg. O regex acho que está a funcionar mas quando dou submit, não aparece a div.invalid-feedback

<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>

Obrigado

2
  • Qual versão bootstrap e jquery está usando?
    – WMomesso
    Commented 2/11/2017 às 23:42
  • Boostrap 4 e jquery-3.2.1.slim.min.js Commented 3/11/2017 às 9:04

1 Resposta 1

1

@JorgeFerreira faltou inserir a class help-block with-errors que usa o erro gerado por 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>

4
  • Obrigado já consegui mas agora aprece o help block em todos os inputs Commented 4/11/2017 às 13:01
  • Você viu aplicar nos outros imputs? veja aqui o exemplo
    – WMomesso
    Commented 4/11/2017 às 13:47
  • Não fica verde quando está certo porque? Commented 4/11/2017 às 19:40
  • Como a versão 4 ainda está em beta, o plugin ainda não é compátivel, assim que sair de beta será apoiado conforme link
    – WMomesso
    Commented 4/11/2017 às 20:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .