Bootstrap 4: проверка нарушает стилизацию элементов встроенной формы?

Question

Я пытаюсь проверить поле встроенной формы с помощью Bootstrap 4.

Когда запускается валидация, поле встроенной формы скачет по ширине. Вот скрипка (просто нажмите Enter, не вводя значение, чтобы увидеть проблему): https://jsfiddle.net/aq9Laaew/213418/

Как я могу это исправить?

Это мой 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>

А это мой JavaScript:

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

Answer 1

Попробуйте это:

    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/