我想使用 HTML5 验证表单并希望在提交表单之前显示模态

Question

我有这个表单，用户可以在其中输入详细信息，并使用 HTML5 的一个功能提交按钮验证这些详细信息。现在我接下来要做的是，当我单击提交按钮时，该按钮会验证表单，如果一切正常，它会打开一个包含表单值的模式。

接下来，我希望用户重新检查，然后单击确认按钮，进一步验证表单。我做不到..这是我的代码..

<form action="/submit" id="form1">
  <table id="formTable">
    <tr>
      <td>
        <label for="stock">Stock Name : </label>
      </td>
      <td>
        <input type="text" name="stock" id="selectedStock" required class="typeahead" style="text-transform: uppercase;">
      </td>
    </tr>

    <tr>
      <td>
        <label for="action">BUY/SELL : </label>
      </td>
      <td style="text-align: left;">
        <select id="action">
          <option>BUY</option>
          <option>SELL</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <label for="quantity">Quantity : </label>
      </td>
      <td>
        <input type="number" name="quantity" id="selectedQuantity" required autocomplete="off">
      </td>
    </tr>

    <tr>
      <td>
        <label for="price">Price : </label>
      </td>
      <td>
        <input type="text" name="price" id="price" disabled required>
      </td>
    </tr>

    <tr>
      <td>
        <label>Total : </label>
      </td>
      <td style="text-align: left;">
        <span id="total"></span>
      </td>
    </tr>


  </table>
  <br/>
  <input type="submit" id="submit" value="Submit">
</form>

<div class="modal fade" id="submitModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h2 class="modal-title">Summary</h2>
      </div>
      <div class="modal-body">
        <div>
          <table style="margin: auto;" id="summaryTable">
            <tr>
              <td> NAME : </td>
              <td id="stockModal"></td>
            </tr>
            <tr>
              <td> BUY/SELL : </td>
              <td id="actionModal"></td>
            </tr>
            <tr>
              <td> QUANTITY : </td>
              <td id="quantityModal"></td>
            </tr>
            <tr>
              <td> PRICE : </td>
              <td id="priceModal"></td>
            </tr>
            <tr>
              <td> TOTAL : </td>
              <td id="totalModal"></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" id="confirmBtnModal">Confirm</button>
        <button class="btn btn-default close" data-dismiss="modal" id="closeBtnModal">Close</button>
      </div>
    </div>
  </div>
</div>

我的 jquery 在这里..

var validation = true;
$("#form1").submit(function(e) {
  if (validation) {
    e.preventDefault();
    $("#submitModal").modal("show");
    gatherInfo();
  }
  $("#confirmBtnModal").click(function() {
    validation = false;
    $("#form1").submit();
  });
  if (validation == false)
    return true;

});

另外，如何检查我的表单是否已提交？ 在打开模式之前，只需单击提交按钮，浏览器就会给我一个错误，因为表单的操作设置为 /submit。我猜它会在单击确认按钮时做同样的事情。

Answer 1

用下面的代码重写你的脚本部分，看看它是否有效，

var validation = true;

$("#submitBtnModal").on('click', function() {
    validation = false;
    $("#form1").submit();
  });

$("#form1").on('submit', function(e) {
  if (validation) {
    e.preventDefault();
    $("#submitModal").modal("show");
    gatherInfo();
  }
  if (validation == false)
    return true;

});

Answer 2

正如我所评论的，如果您将 $("#confirmBtnModal") 更改为 $("#submitBtnModal")，它应该可以正常工作

var validation = true;
$("#form1").submit(function(e) {
  if (validation) {
    e.preventDefault();
    $("#submitModal").modal("show");
    //
  }
  $("#submitBtnModal").click(function() {
    validation = false;
    $("#form1").submit();
  });
  if (validation == false)
    return true;

});

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<form action="/submit" id="form1">
  <table id="formTable">
    <tr>
      <td>
        <label for="stock">Stock Name : </label>
      </td>
      <td>
        <input type="text" name="stock" id="selectedStock" required class="typeahead" style="text-transform: uppercase;">
      </td>
    </tr>

    <tr>
      <td>
        <label for="action">BUY/SELL : </label>
      </td>
      <td style="text-align: left;">
        <select id="action">
                <option>BUY</option>
                <option>SELL</option>
            </select>
      </td>
    </tr>

    <tr>
      <td>
        <label for="quantity">Quantity : </label>
      </td>
      <td>
        <input type="number" name="quantity" id="selectedQuantity" required autocomplete="off">
      </td>
    </tr>

    <tr>
      <td>
        <label for="price">Price : </label>
      </td>
      <td>
        <input type="text" name="price" id="price" disabled required>
      </td>
    </tr>

    <tr>
      <td>
        <label>Total : </label>
      </td>
      <td style="text-align: left;">
        <span id="total"></span>
      </td>
    </tr>


  </table>
  <br/>
  <input type="submit" id="submit" value="Submit">
  <div class="modal fade" id="submitModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <h2 class="modal-title">Summary</h2>
        </div>
        <div class="modal-body">
          <div>
            <table style="margin: auto;" id="summaryTable">
              <tr>
                <td> NAME : </td>
                <td id="stockModal"></td>
              </tr>
              <tr>
                <td> BUY/SELL : </td>
                <td id="actionModal"></td>
              </tr>
              <tr>
                <td> QUANTITY : </td>
                <td id="quantityModal"></td>
              </tr>
              <tr>
                <td> PRICE : </td>
                <td id="priceModal"></td>
              </tr>
              <tr>
                <td> TOTAL : </td>
                <td id="totalModal"></td>
              </tr>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success" id="submitBtnModal">Confirm</button>
          <button class="btn btn-default close" data-dismiss="modal" id="closeBtnModal">Close</button>
        </div>
      </div>
    </div>