Javascript 表单验证在将ajax提交添加到页面后停止工作
我有一个常规的表单提交页面，采用了旧的方式，使用了运行良好的表单验证javascript。见下文。我将页面更改为通过ajax提交，现在跳过了表单验证。如何将两者“结合”起来，使其全部工作？我假设我需要在ajax文章中移动验证，但我无法理解。任何帮助都将不胜感激Javascript 表单验证在将ajax提交添加到页面后停止工作,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个常规的表单提交页面，采用了旧的方式，使用了运行良好的表单验证javascript。见下文。我将页面更改为通过ajax提交，现在跳过了表单验证。如何将两者“结合”起来，使其全部工作？我假设我需要在ajax文章中移动验证，但我无法理解。任何帮助都将不胜感激 <form class="card" name="myform" id="myform"> <div class="card-body"> <h3 cla
<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>
添加新的博客文章
博客标题
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
//到
var forms=document.getElementsByClassName（'card'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
$（文件）。在（“点击”上，“提交”，功能（e）{
//防止即时点击
e、 预防默认值（）；
$（文档）.ajaxSend（函数（事件、请求、设置）{
$（“#加载指示器”）.show（）；
$（“#submitbtn”）.prop（'disabled'，true）；
});
$（文档）.ajaxComplete（功能（事件、请求、设置）{
$（“#加载指示器”）.hide（）；
$（“#输出”）.fadeTo（4000500）.slideUp（500，function（）{
$（“#输出”）.slideUp（500）；
});
$（“#myform”）[0]。重置（）；
$（“#提交”）.prop（'disabled'，false）；
});
var formData=new formData（$（'#myform'）[0]）；
$.ajax({
url:'add_blog_do.php'，
enctype:“多部分/表单数据”，
键入：“POST”，
数据：formData，
成功：函数（响应）{console.log（响应）；}，
contentType:false，
processData:false，
缓存：false
});
});
单击事件。这将在提交事件之前激发。由于您正在提交按钮单击处理程序中调用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>
添加新的博客文章
博客标题
$（文件）。在（“点击”上，“提交”，功能（e）{
//防止即时点击
e、 预防默认值（）；
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'card'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
//检查表格是否无效
//如果是，它当前会记录控制台日志。
//你可能想在这里做些别的事情，但这取决于你自己
if（form.checkValidity（）==false）{
console.log（'表单验证失败'）
}否则{
//如果表单没有失败，我们将进入这个块并运行AJAX
//照常打电话
form.classList.add（'was-validated'）；
var formData=new formData（$（'#myform'）[0]）；
$.ajax({
url:'add_blog_do.php'，
enctype:“多部分/表单数据”，
键入：“POST”，
数据：formData，
成功：函数（响应）{console.log（响应）；}，
contentType:false，
processData:false，
缓存：false
});
}
});
}，假）；
//ajaxSend和ajaxComplete的AJAX事件侦听器
$（文档）.ajaxSend（函数（事件、请求、设置）{
$（“#加载指示器”）.show（）；
$（“#submitbtn”）.prop（'disabled'，true）；
});
$（文档）.ajaxComplete（功能（事件、请求、设置）{
$（“#加载指示器”）.hide（）；
$（“#输出”）.fadeTo（4000500）.slideUp（500，function（）{
$（“#输出”）.slideUp（500）；
});
$（“#myform”）[0]。重置（）；
$（“#提交”）.prop（'disabled'，false）；
});
});
您已将AJAX调用附加到提交按钮上的单击事件。这将在提交事件之前激发。由于您正在提交按钮单击处理程序中调用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>
添加新的博客文章
博客标题
$（文件）。在（“点击”上，“提交”，功能（e）{
//防止即时点击
e、 预防默认值（）；
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'