验证后如何提交表单

Question

我有一个漂亮的表单，使用jQuery进行了很好的验证，但是我应该在哪里放置表单验证后运行的函数?

格式如下:

<form id="myForm" class=" needs-validation" novalidate>
<div class="rendered-form">

<div class="form-group row formbuilder-text form-group field-text-1650256863373">
<label for="text-1650256863373" class="col-sm-2 formbuilder-text-label">Name<span class="formbuilder-required">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="text-1650256863373" access="false" maxlength="50" id="text-1650256863373" required="required" aria-required="true">
</div>
</div>
<div class="form-group row formbuilder-text form-group field-text-1650256864829">
<label for="text-1650256864829" class="col-sm-2 formbuilder-text-label">E-mail:<span class="formbuilder-required">*</span></label>
<div class="col-sm-10">
<input type="email" class="form-control" name="text-1650256864829" access="false" maxlength="30" id="text-1650256864829" required="required" aria-required="true">
<div class="invalid-feedback">e-mail</div>
</div>
</div>
<div class="form-group row formbuilder-text form-group field-text-1650256865677">
<label for="text-1650256865677" class="col-sm-2 formbuilder-text-label">Phone<span class="formbuilder-required">*</span></label>
<div class="col-sm-10">
<div class="input-group-prepend">
<div class="input-group-text">+1</div>
<input type="tel" class="form-control" name="text-1650256865677" access="false" maxlength="15" id="text-1650256865677" required="required" aria-required="true">
</div>

</div>
</div>

<div class="formbuilder-button form-group field-button-1650256992197">
<button type="submit"  class="btn-success btn" name="button-1650256992197" access="false" style="success" id="button-1650256992197">Подписать</button>
</div>
</div>

</form>

这是我的javascript验证:

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();

</script>

现在，当用户单击Submit按钮时，如果验证了表单，我需要显示一个带有消息的警告窗口。我把它放哪了?

Answer 1

我假设你的checkValidity()是一个布尔函数。

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if(!form.checkValidity()) {
// When is invalid
alert('invalid');
event.preventDefault();
event.stopPropagation();
} else {
// When is valid
alert('valid');
}
// On form submit whether valid or invalid
alert('Was validated');
form.classList.add('was-validated');
}, false);
});
})();
</script>

Answer 2

也许您可以尝试在脚本末尾添加您想要的警报?如果你在脚本结束时执行，它会显示逻辑!

<script>
// Example starter JavaScript for disabling form submissions if there are     invalid fields
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation  styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
alert('What you want to say to user');
})();

</script>

我想你可以把它放在你想要的地方，但在你的逻辑之后，看看它是否完全正确地运行。