表单验证在引导程序中不起作用

Posted

技术标签:

【中文标题】表单验证在引导程序中不起作用【英文标题】：Form validation doesn't works in bootstrap 【发布时间】：2021-02-21 06:43:15 【问题描述】：

我的引导模式有一个“小”问题。我正在将在 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">&times;</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";
?>

【问题讨论】：

我需要 xhttp 请求从 php 文件动态加载表单。然后我需要 AJAX bcz 我必须在我的模态正文中接收服务器答案。 XHTTP 请求和 .ajax 位于不同的函数中。 我正在使用 HTML 内置表单验证。无需使用其他方法进行表单验证。我只需要检查空输入 将输入字段中的reguired 更改为required 是的，我已经这样做了。谢谢！ 【参考方案1】：

xmlhttprequest 是 ajax。 $.ajax 和 xhttp 一样......

element.load(url) 也做 ajax

    将reguired 替换为required（拼写） 给必填字段一个空值 将$("#save").click(function(event) 替换为$("#modal-body").on("submit","#myForm", function(event) 因为您需要提交表单来执行验证 - e.preventDefault 会停止提交，因此您可以执行 ajax 替换 
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();

用这个 jquery

$('[data-target="#myModal"]').on("click", function() 
  $("#modal-header").html($(this).data("title")); 
  $("#modal-body").empty().load($(this).data("url"))

并从

更改按钮

&lt;button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" onClick="fillModal('temp.php', 'modalTitle');"&gt;Open modal&lt;/button&gt;

到

&lt;button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-title="modalTitle" data-url="temp.php"&gt;Open modal&lt;/button&gt;

$(function() 

  $('[data-target="#myModal"]').on("click", function() 
    $("#modal-header").html($(this).data("title")); 
    // $("#modal-body").load($(this).data("url")); 
    
    // the code below is an example - uncomment above and delete below
    $("#modal-body").html(`<form name="myForm" id="myForm" data-target="#myModal">
<table class="table table-bordered table-condensed" style="width:1240px;">
<thead>
  <tr>
      <th class="bg-success th" style="width: 170px; max-width: 170px;">Sample 1</th>
      <th class="bg-success th" style="width: 170px; max-width: 170px;">Sample 2</th>
      <th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 3</th>
      <th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 4</th>
      <th class="bg-primary th" style="width: 130px; max-width: 130px;">Sample 5</th>
      <th class="bg-primary th" style="width: 50px; max-width: 50px;">Sample 6
      <th class="active th" style="width: 130px; max-width: 130px;">Sample 7</th>
      <th class="active th" style="width: 100px; max-width: 100px;">Sample 8</th>
      <th class="active th" style="width: 200px; max-width: 200px;">Sample 9</th>
  </tr>
</thead>
  <tr>
      <td style="width: 170px; max-width: 170px;"><input class="form-control input-sm" type="text" name="Sample_1" placeholder="Sample 1..." required value=""></td>
      <td style="width: 170px; max-width: 170px;"><input class="form-control input-sm" type="text" name="Sample_2" placeholder="Sample 2..." required value=""></td>
      <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_3" placeholder="Sample 3..."></td>
      <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_4" placeholder="Sample 4..."></td>
      <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="text" name="Sample_5" placeholder="Sample 5..."></td>
      <td style="width: 50px; max-width: 50px;"><input class="form-control input-sm" type="text" name="Sample_6" placeholder="Sample 6..."></td>
      <td style="width: 130px; max-width: 130px;"><input class="form-control input-sm" type="number" name="Sample_7" placeholder="Sample 7..."></td>
      <td style="width: 100px; max-width: 100px;"><input  class="form-control input-sm"type="text" name="Sample_8" placeholder="Sample 8..."></td>
      <td style="width: 200px; max-width: 200px;"><input class="form-control input-sm" type="text" name="Sample_9" placeholder="Sample 9..."></td>
  </tr>
</tale>
<input type="hidden" name="act" value="addNew">
</form>`)
  )


  $("#modal-body").on("submit","#myForm", 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-title="modal title 1" data-url="temp..php" data-backdrop="static">Open modal 1</button>


<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-title="modal title 2" data-url="temp..php" data-backdrop="static">Open modal 2</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">
        <h4 class="modal-title" id="modal-header"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </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>

【讨论】：

我没有看到我关于 reguired 和 required 的错误 :-)))) 我改变了它，但验证仍然不起作用 :-( 你对 fillModal 函数的建议也不起作用 是的。你有别的东西。请在控制台中查看错误 我设法以您的方式从我的 temp.php 文件中加载了用于 fillModal 函数的表单，但是表单验证仍然不起作用... :-( 因为你没有提交表单。查看我的更新答案 是的，它有效。但我需要动态加载到不同形式的模态体中。我有几个包含表单的 php 脚本。感谢您对提交表单的解释。实际上我真的没有提交我的表单... :-))) 欣赏你的技能！

以上是关于表单验证在引导程序中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

表单验证在 XAmpp 中不起作用

从表单中获取数据到 Django 中不起作用

jQuery 验证插件在 WordPress 中不起作用

切换按钮在引导程序4中不起作用，而角度7应用程序在导航栏中不起作用

.ajaxform 在验证 submitHandler 中不起作用？

错误处理程序上的引导验证器不起作用