引导模式中的 HTML5 表单验证答案

【问题标题】：HTML5 form validation in a bootstrap modal引导模式中的 HTML5 表单验证
【发布时间】：2023-04-08 18:33:01
【问题描述】：

我对 jquery 和 javascript 比较陌生。单击模式中的“打开模式”按钮会打开表单。接下来，当我在模式中单击“保存”时，它应该验证 HTML5 表单，成功验证后应该调用另一个函数“addDetails()”。

如何使用现有的 jquery 表单验证插件或任何其他方法来实现这一点？使用时需要参考哪些 CDN？

<!doctype html>
<html>
    <head>  
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>

        <div id="myFormModal" class="modal fade" role="dialog">
          <div class="modal-dialog">


            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add details</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" id="myForm" name="contact" action="#">
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
                    <div class="col-sm-8">
                      <input type="date" class="form-control" id="dor" name="dor" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="name">Name:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="weburl">Website:</label>
                    <div class="col-sm-8">
                      <input type="url" class="form-control" id="weburl" name="weburl" required>
                    </div>
                  </div>
                  <div class="form-group">
                   <label class="control-label col-sm-3" for="myphoto">Image:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="myphoto" name="myphoto" required>
                    </div>
                  </div>
                  <hr />
                  <div class="form-group">        
                    <div class="col-sm-offset-3 col-sm-3">
                      <button type="button" class="btn btn-primary btn-sm" onclick="addDetails()">Save</button>
                    </div>
                    <div class="col-sm-3">
                      <button type="reset" class="btn btn-primary btn-sm">Reset</button>
                    </div>
                    <div class="col-sm-3">
                      <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： jquery html forms validation bootstrap-modal

【解决方案1】：

有一个样本表格：

<form>
<textarea required></textarea>
<input type="submit" style="display:none;"/>
</form>

<a>Some other button to trigger event</a>

现在我们要检查表格是否填写正确：

//this is <a> click event:
if (!$('form')[0].checkValidity()) {
$('form').find('input[type="submit"]').click();
return false;
}

这将触发表单发送但不会发送，因为有错误;）

似乎 html5 验证错误显示在 input[type="submit"] click :)

希望对你也有用！ :)

【讨论】：

谢谢..但是如何在成功验证时调用另一个函数？在这种情况下，按钮类型是否仍应为“提交”？
在提交时调用您想要的方法，但在该方法中首先检查上述条件....如果结果为假终止或显示验证失败的弹出窗口..