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');
});