引导 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/