共计 1985 个字符,预计需要花费 5 分钟才能阅读完成。
本文应用 Bootstrap4.4.1 版本。
在用 Bootstrap 进行表单验证时,须要给 form 增加 class=”needs-validation” 和 novalidate 属性。
<form action=""class="needs-validation" novalidate>
<div class="form-group row">
<label for="title" class="col-md-2 col-sm-3 col-4 col-form-label text-right"><span class="text-danger">*</span> 商品名称 </label>
<div class="col-sm-8 col-8">
<input type="text" class="form-control" id="title" name="title" placeholder="请输出" required>
<div class="invalid-feedback"> 请输出商品名称 </div>
</div>
</div>
<div class="form-group row">
<label for="subtitle" class="col-md-2 col-sm-3 col-4 col-form-label text-right"><span class="text-danger">*</span> 商品分类 </label>
<div class="col-sm-8 col-8">
<select name="type" class="form-control" value=""id="type" required>
<option value=""> 请抉择 </option>
<option value="1"> 美容护肤 </option>
<option value="2"> 服饰鞋帽 </option>
<option value="3"> 电子产品 </option>
<option value="4"> 日用百货 </option>
</select>
<div class="invalid-feedback"> 请抉择商品分类 </div>
</div>
</div>
<div class="form-group row">
<label for="title" class="col-md-2 col-sm-3 col-4 col-form-label text-right"><span class="text-danger">*</span> 商品信息 </label>
<div class="col-sm-8 col-8">
<textarea class="form-control" name="info" cols="30" rows="10" required></textarea>
<div class="invalid-feedback"> 请输出商品信息 </div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-8 col-8 offset-md-2 offset-sm-3 offset-4">
<button type="submit" class="btn btn-primary"> 确 定 </button>
</div>
</div>
</form>
还有如下 js 代码:
$(function() {
// bootstrap 表单验证
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {form.addEventListener('submit', function(event) {if (form.checkValidity() === false) {
// 滚动到第一个验证失败的地位
var invalidDom = $('.needs-validation .form-control:invalid');
invalidDom[0].scrollIntoView(true);
event.preventDefault();
event.stopPropagation();}
form.classList.add('was-validated');
}, false);
});
})
如果须要验证后滚动到第一个失败的地位只需增加两行代码,invalidDom 可依据本人我的项目做适当调整。
// 滚动到第一个验证失败的地位
var invalidDom = $('.needs-validation .form-control:invalid');
invalidDom[0].scrollIntoView(true);
正文完