Bootstrap 4：验证会破坏嵌入式表单元素的样式吗？

Question

I am trying to validate an inline form field, with Bootstrap 4.

When validation is triggered, the inline form field jumps in width. Here is a fiddle (just click Enter without entering a value, to see the problem): https://jsfiddle.net/aq9Laaew/213418/

How can I fix this?

This is my HTML:

<form class="form-inline needs-validation" id="form-stage1" novalidate>
  <label class="sr-only" for="stage1-amount">Amount in thousands</label>
  <div class="input-group mb-1 mr-sm-1">
    <div class="input-group-prepend"><div class="input-group-text">£</div></div>
    <input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required>
  <div class="invalid-feedback">Please enter an amount to proceed</div>
  </div>
  <button type="submit" class="btn btn-secondary mb-1">Enter</button>
</div>
</form>

And this is my JavaScript:

d3.select('#form-stage1').on('submit', function(e) { 
  d3.event.preventDefault();
  d3.event.stopPropagation();
  d3.select(this).attr('class', 'was-validated');
});

Answer 1

Try this :

  var form = document.getElementById('form-stage1'); d3.select('#form-stage1').on('submit', function(e) { d3.event.preventDefault(); d3.event.stopPropagation(); d3.select(this).attr('class', 'form-inline was-validated'); $(".invalid-feedback").show(); if (form.checkValidity() !== false) { d3.select('#stage1-results').style('display', 'inline-block'); var val = d3.select('#stage1-amount').property("value"); d3.select('#stage1-output').text(formatPounds(val)); var percentile = getPercentile('property', val) d3.select('#stage1-lower').text(percentile); d3.select('#stage1-higher').text(100-percentile-1); } }); 

 .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } .form-control{ width:auto!important; flex:0!important; } .input-group{ width:auto!important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- Bootstrap docs: https://getbootstrap.com/docs --> <div class="container"> <form class="form-inline needs-validation" id="form-stage1" novalidate> <label class="sr-only" for="stage1-amount">Amount in thousands</label> <div class="input-group mb-1 mr-sm-1"> <div class="input-group-prepend"><div class="input-group-text">£</div></div> <input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required> </div> <button type="submit" class="btn btn-secondary mb-1">Enter</button> <div class="invalid-feedback">Please enter an amount to proceed</div> </div> </form> </div> 

https://jsfiddle.net/aq9Laaew/215767/