用bootstrap (novalidate)验证表单

Question

我有一个问题验证与引导novalidate表单。一些表单字段包括"必填"。标签和其他标签没有。

为了验证，我提交了没有数据的表单，并且'was-validated'类使所有字段都经过验证，其中包含' required ';标签用红色标记，其他标签用绿色标记。

这个想法是指定要验证的字段，而不是整个表单。

你能帮我吗?

形式

<form id="Data" method="POST" class="needs-validation mt-0" novalidate>
<div class="row mb-1">
<div class="col-lg-12 ">
<div class="form-group">
<label class="d-block font-weight-semibold">Name: <span class="text-danger">*</span></label>
<input type="text" id="name" name="Name" class="form-control" autocomplete="off" required>
</div>
</div> <!-- / col -->
</div> <!-- / row-->
<div class="row mb-1">
<div class="col-lg-12 ">
<div class="form-group">
<label class="d-block font-weight-semibold">Lastname: <span class="text-danger">*</span></label>
<input type="text" id="lastname" name="lastname" class="form-control" autocomplete="off" required>
</div>
</div> <!-- / col -->
</div> <!-- / row-->
<div class="row mb-1">
<div class="col-lg-12 ">
<div class="form-group">
<label class="d-block font-weight-semibold">Street: <span class="text-danger">*</span></label>
<input type="number" id="Street" name="Street" class="form-control">
</div>
</div> <!-- / col -->
</div> <!-- / row-->
</form>

JS

<script type="text/javascript">
$('#Data').on('submit', function(e){
e.preventDefault();
var form = document.getElementById('Data');
if (!form.checkValidity()) {
e.preventDefault();
e.stopPropagation();
}
else {
$.ajax({
//url: "",
type: $('#Data').attr('method'),
data: $('#Data').serialize(),
//dataType: 'json',
beforeSend: function(){ },
success:function(response) {
if (response.success == true) {
}
else {
}
}
})
}
$('#Data').addClass('was-validated');
});
</script>

Answer 1

对每个需要检查的字段调用checkValidity()，而不是完整的表单:

var formFlag = true;
var nameField = document.getElementById("name");
if (!nameField.checkValidity()) {
nameField.classList.add("is-invalid");
formFlag = false;
}
var lastnameField = document.getElementById("lastname");
if (!lastnameField.checkValidity()) {
lastnameField.classList.add("is-invalid");
formFlag = false;
}
if (!formFlag) {
e.preventDefault();
e.stopPropagation();
return;
} else {