在bootstrap中使用表单检查多个模态

在我的网站上，用户可以注册并登录，然后买卖股票。我现在想实现一个帐户页面，用户可以在其中查看他们的所有信息并分别进行更改。为此，我选择了多模态的选项。我正在使用bootstrap 4.5x创建它们。在这些模态中，每个模态都是无法提交的表单，但我想在通过“post”发送表单信息之前验证它们。
我找到了使用Bootstrap4.5x进行表单验证的文档，它提供了处理验证过程的javascript代码片段。验证工作正常，但我想为每个模式添加我自己的检查标准，如果用户不符合这些标准，则显示不同的错误消息。但我真的不知道如何做到这一点，我不是最好的javascript，所以如果有人能帮助我，我将不胜感激。
我使用flask作为我网站的框架。以下是html和javascript代码：

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // 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);
})();

<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, width=device-width">

  <!-- http://getbootstrap.com/docs/4.5/ -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
  <link href="/static/favicon.ico" rel="icon">
  <!-- https://icons.getbootstrap.com/#usage -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

  <link href="/static/styles.css" rel="stylesheet">

  <!-- http://getbootstrap.com/docs/4.5/ -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <title>C$50 Finance: {% block title %}{% endblock %}</title>

</head>

<body>
  <div class="container">
    <i class="bi bi-person-circle" style="font-size: 3.5rem;"></i>
    <h3>{{ user.username }}</h3>
    <div class="row">
      <div class="col-md">
        <table class="table table-hover" style="text-align: left;">
          <thead>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
          </thead>
          <tbody>
            <tr>
              <td>Username:</td>
              <td>{{ user.username }}</td>
              <td><i class="bi bi-pencil-square" data-toggle="modal" data-target="#change_username" style="cursor: pointer;"></i></td>
            </tr>
            <tr>
              <td>Name:</td>
              <td>{{ user.fullName }}</td>
              <td><i class="bi bi-pencil-square" data-toggle="modal" data-target="#add_fullname" style="cursor: pointer;"></i></td>
            </tr>
            <tr>
              <td>Birthday:</td>
              <td>{{ user.birthday }}</td>
              <td><i class="bi bi-pencil-square" data-toggle="modal" data-target="#add_birthday" style="cursor: pointer;"></i></td>
            </tr>
            <tr>
              <td>Password:</td>
              <td class="hidetext ellipsis" max="15">{{ user.hash }}</td>
              <td><i class="bi bi-pencil-square" data-toggle="modal" data-target="#change_password" style="cursor: pointer;"></i></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md">
        <table class="table table-hover" style="text-align: left;">
          <thead>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
          </thead>
          <tbody>
            <tr>
              <td>Cash:</td>
              <td>$ 10.000,00</td>
              <td><i class="bi bi-cash" data-toggle="modal" data-target="#add_cash" style="cursor: pointer;"></i></td>
            </tr>
            <tr>
              <td>Owned Stocks:</td>
              <td>15</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- Change the Username modal -->
    <div class="modal fade" id="change_username" tabindex="-1" aria-labelledby="changeUsername" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="changeUsername">Change Username</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
          </div>
          <div class="modal-body">
            <form class="needs-validation" action="/account" method="post" novalidate>
              <div class="form-group">
                <input name="new_username" type="text" class="form-control" placeholder="New Username" required>
                <div class="invalid-feedback">
                  Enter a username!
                </div>
              </div>
              <div class="form-group">
                <input name="confirm_username" type="text" class="form-control" placeholder="Confirm Username" required>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    <!-- End of username modal -->
    <!-- Change or add Full Name -->
    <div class="modal fade" id="add_fullname" tabindex="-1" aria-labelledby="changeFullname" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="changeFullname">Change Full Name</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
          </div>
          <div class="modal-body">
            <form class="needs-validation" action="/account" method="post" novalidate>
              <div class="form-group">
                <input name="first_name" type="text" class="form-control" placeholder="First Name" required>
                <div class="invalid-feedback">
                  Enter a username!
                </div>
              </div>
              <div class="form-group">
                <input name="last_name" type="text" class="form-control" placeholder="Last Name" required>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    <!-- End of modal change or add Full Name -->
    <!-- Add birthday modal -->
    <div class="modal fade" id="add_birthday" tabindex="-1" aria-labelledby="addBirthday" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addBirthday">Add Birthday</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
          </div>
          <div class="modal-body">
            <form class="needs-validation" action="/account" method="post">
              <div class="form-group">
                <input name="day" type="number" class="form-control" placeholder="Day" min="1" max="31">
                <input name="month" type="number" class="form-control" placeholder="Month" min="1" max="12">
                <input name="year" type="number" class="form-control" placeholder="Year" min="1">
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    <!-- Add birthday modal -->
    <!-- Change password modal -->
    <div class="modal fade" id="change_password" tabindex="-1" aria-labelledby="changePassword" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="changePassword">Change Password</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
          </div>
          <div class="modal-body">
            <form class="needs-validation" action="/account" method="post">
              <div class="form-group">
                <input name="old_password" type="text" class="form-control" placeholder="Old password">
              </div>
              <div class="form-group">
                <input name="new_password" type="text" class="form-control" placeholder="New Password">
              </div>
              <div class="form-group">
                <input name="conf_password" type="text" class="form-control" placeholder="Password (Again)">
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    <!-- End of change password modal -->
    <!-- Add cash modal -->
    <div class="modal fade" id="add_cash" tabindex="-1" aria-labelledby="changeCash" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="changeCash">Change Username</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
          </div>
          <div class="modal-body">
            <form class="needs-validation" action="/account" method="post">
              <div class="form-group">
                <input name="added_cash" type="number" class="form-control" placeholder="Add cash" min="1">
              </div>
              <div class="form-group">
                <input name="password_cash" type="text" class="form-control" placeholder="Password">
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    <!-- End of add cash modal -->
  </div>
</body>

</html>

在bootstrap中使用表单检查多个模态

暂无答案！

相关问题

热门标签

最新问答