I'm facing an issue with validating an inline form field using Bootstrap 4.
Whenever the validation is triggered, the width of the inline form field jumps. You can see the problem in action by clicking Enter without entering a value on this fiddle: https://jsfiddle.net/aq9Laaew/213418/
Is there a way to resolve this?
Here's my HTML code:
<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 here's my JavaScript code:
d3.select('#form-stage1').on('submit', function(e) {
d3.event.preventDefault();
d3.event.stopPropagation();
d3.select(this).attr('class', 'was-validated');
});