我的引导模式有一个“小”问题。我正在将在 temp.php 文件中创建的表单加载到 myModal 中。然后我尝试使用 AJAX 将此表单发送到 save.php 文件。一切正常，但表单验证不起作用（在提交表单之前未检查是否为空）。如果我在模态正文中对我的表单进行硬编码，那么一切正常。仅当我从外部 .php 文件加载此表单时才会出现此问题...任何建议如何使表单验证以正确的方式工作？提前致谢！
我的 index.php 文件：
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../jquery/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" onClick="fillModal('temp.php', 'modalTitle');">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="width:1650px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-header">
</h4>
</div>
<div class="modal-body my_container-fluid" id="modal-body">
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success btn-sm" id="save">Save</button>
<button type="button" class="btn btn-danger danger btn-sm" data-dismiss="modal" id="cancel">Close</button>
</div>
</div>
</div>
</div>
<script>
function fillModal(str, title) {
var xhttp;
document.getElementById("modal-body").innerHTML = "";
document.getElementById("modal-header").innerHTML = title;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("modal-body").innerHTML = this.responseText;
}
};
xhttp.open("POST", str, true);
xhttp.send();
}
//Submit form with AJAX
$(document).ready(function(){
$("#save").click(function(event){
event.preventDefault(); //prevent default action
// AJAX request
$.ajax({
url : "save.php", //form action url
type: 'POST', //form method
data : $("#myForm").serialize(), //encode form elements for submission
success: function(response){
$('.modal-body').html(response);
},
error: function(){
$('.modal-body').html('Error...');
}
});
});
});
</script>
</body>
</html>
这是我的 temp.php 文件：
<?php
echo "<form name=\"myForm\" id=\"myForm\" data-target=\"#myModal\">\n";
echo "<table class=\"table table-bordered table-condensed\" style=\"width:1240px;\">\n";
echo "<thead>\n";
echo " <tr>\n";
echo " <th class=\"bg-success th\" style=\"width: 170px; max-width: 170px;\">Sample 1</th>\n";
echo " <th class=\"bg-success th\" style=\"width: 170px; max-width: 170px;\">Sample 2</th>\n";
echo " <th class=\"bg-primary th\" style=\"width: 130px; max-width: 130px;\">Sample 3</th>\n";
echo " <th class=\"bg-primary th\" style=\"width: 130px; max-width: 130px;\">Sample 4</th>\n";
echo " <th class=\"bg-primary th\" style=\"width: 130px; max-width: 130px;\">Sample 5</th>\n";
echo " <th class=\"bg-primary th\" style=\"width: 50px; max-width: 50px;\">Sample 6\n";
echo " <th class=\"active th\" style=\"width: 130px; max-width: 130px;\">Sample 7</th>\n";
echo " <th class=\"active th\" style=\"width: 100px; max-width: 100px;\">Sample 8</th>\n";
echo " <th class=\"active th\" style=\"width: 200px; max-width: 200px;\">Sample 9</th>\n";
echo " </tr>\n";
echo "</thead>\n";
echo " <tr>\n";
echo " <td style=\"width: 170px; max-width: 170px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_1\" placeholder=\"Sample 1...\" reguired></td>\n";
echo " <td style=\"width: 170px; max-width: 170px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_2\" placeholder=\"Sample 2...\" reguired></td>\n";
echo " <td style=\"width: 130px; max-width: 130px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_3\" placeholder=\"Sample 3...\"></td>\n";
echo " <td style=\"width: 130px; max-width: 130px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_4\" placeholder=\"Sample 4...\"></td>\n";
echo " <td style=\"width: 130px; max-width: 130px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_5\" placeholder=\"Sample 5...\"></td>\n";
echo " <td style=\"width: 50px; max-width: 50px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_6\" placeholder=\"Sample 6...\"></td>\n";
echo " <td style=\"width: 130px; max-width: 130px;\"><input class=\"form-control input-sm\" type=\"number\" name=\"Sample_7\" placeholder=\"Sample 7...\"></td>\n";
echo " <td style=\"width: 100px; max-width: 100px;\"><input class=\"form-control input-sm\"type=\"text\" name=\"Sample_8\" placeholder=\"Sample 8...\"></td>\n";
echo " <td style=\"width: 200px; max-width: 200px;\"><input class=\"form-control input-sm\" type=\"text\" name=\"Sample_9\" placeholder=\"Sample 9...\"></td>\n";
echo " </tr>\n";
echo "</tale>\n";
echo "<input type=\"hidden\" name=\"act\" value=\"addNew\">\n";
echo "</form>\n";
?>