javascript - 将ajax提交添加到页面后,表单验证退出工作
问题描述
我有一个常规的表单提交页面,这是一种使用表单验证 javascript 的老式方式,效果很好。见下文。我将页面更改为通过 ajax 提交,现在跳过了表单验证。我如何“结合”两者以使其全部工作?我假设我需要以某种方式在 ajax 帖子中移动验证,但我无法弄清楚。任何帮助,将不胜感激。
<form class="card" name="myform" id="myform">
<div class="card-body">
<h3 class="card-title">Add New Blog Post</h3>
<div id='response'></div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="form-label">Blog Title</label>
<input name="subject" type="text" required class="form-control" id="subject" required>
<div class="is-valid"></div>
</div>
</div>
</div>
</form>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles
//to
var forms = document.getElementsByClassName('card');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script>
$(document).on("click","#submitbtn",function(e){
//Prevent Instant Click
e.preventDefault();
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
$("#submitbtn").prop('disabled', true);
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
$("#output").fadeTo(4000, 500).slideUp(500, function(){
$("#output").slideUp(500);
});
$("#myform")[0].reset();
$("#submitbtn").prop('disabled', false);
});
var formData = new FormData($('#myform')[0]);
$.ajax({
url: 'add_blog_do.php',
enctype: 'multipart/form-data',
type: 'POST',
data: formData,
success: function(response) {console.log(response);},
contentType: false,
processData: false,
cache: false
});
});
</script>
解决方案
您已将 AJAX 调用附加到click
提交按钮上的事件。这在提交事件之前触发。由于您在event.preventDefault()
提交按钮单击处理程序中调用,因此该submit
事件永远不会运行。
您将希望在submit
事件处理程序中触发 AJAX 调用或将其移动到click
处理程序中。一旦表单通过有效性检查,您就可以启动实际的 AJAX 调用。
一个例子:
<form class="card" name="myform" id="myform">
<div class="card-body">
<h3 class="card-title">Add New Blog Post</h3>
<div id='response'></div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="form-label">Blog Title</label>
<input name="subject" type="text" required class="form-control" id="subject" required>
<div class="is-valid"></div>
</div>
</div>
</div>
</form>
<script>
$(document).on("click","#submitbtn",function(e){
//Prevent Instant Click
e.preventDefault();
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('card');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
// Check and see if the form is INVALID
// if it is, it currently console logs.
// You may want to do something else here but that's up to you
if (form.checkValidity() === false) {
console.log('Form validation failed')
} else {
// If the form DOESN'T fail, we'll enter this block and run our AJAX
// call as normal
form.classList.add('was-validated');
var formData = new FormData($('#myform')[0]);
$.ajax({
url: 'add_blog_do.php',
enctype: 'multipart/form-data',
type: 'POST',
data: formData,
success: function(response) { console.log(response); },
contentType: false,
processData: false,
cache: false
});
}
});
}, false);
// AJAX Event Listeners for ajaxSend and ajaxComplete
$(document).ajaxSend(function(event, request, settings) {
$('#loading-indicator').show();
$("#submitbtn").prop('disabled', true);
});
$(document).ajaxComplete(function(event, request, settings) {
$('#loading-indicator').hide();
$("#output").fadeTo(4000, 500).slideUp(500, function(){
$("#output").slideUp(500);
});
$("#myform")[0].reset();
$("#submitbtn").prop('disabled', false);
});
});
</script>
推荐阅读
- javascript - 从 VueDraggable 的事件内部调用 vue 方法
- drupal - Drupal 8 Open Social 新子主题未在外观中显示
- python - 使用 Python Tkinter 时如何绑定/映射全局热键?
- angular - 从 Firebase 过滤“时间戳”数据
- android - 为什么我的 Android 应用程序在三星 Galaxy Note 9 上崩溃?
- linux-kernel - 在 CentOS 7 上编译和使用实时内核
- python - pytest - 使用来自另一个插件的插件
- ubuntu - Cron prestashop 模块导入库存
- c# - 本地托管在 IIS 服务器上时登录时出现 500 服务器错误
- node.js - 如何在测试阶段运行 mongo?