如何使用jQuery validate驗證此Boostrap模式

Question

我正在嘗試在Bootstrap模態中得到“必需”警告，因此不可能在輸入字段中存在一些有效數據之前提交它，但是不是僅僅將其關閉。 任何想法可能丟失了嗎？

這是筆： https : //codepen.io/anon/pen/wPaKPR?editors=1011

<button type="submit" data-toggle="modal" data-target="#addSomething">Open modal</button>

<div id="addSomething" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <form role="form" id="newModalForm">
          <b>Add name:</b>
          <input type="text" placeholder="Name" id="pName" name="pName" required>
          <hr>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnCloseIt" class="btn btn-default" data-dismiss="modal">Close</button>
        <input type="submit" id="btnSaveIt" class="btn btn-default" data-dismiss="modal" value="Add">
      </div>
      </form>
    </div>
  </div>
</div>

$(function() {

  $("#newModalForm").validate({
    rules: {
      pName: {
        required: true,
        minlength: 8
      },
      action: "required"
    },
    messages: {
      pName: {
        required: "Please enter some data",
        minlength: "Your data must be at least 8 characters"
      },
      action: "Please provide some data"
    }
  });
});

Answer 1

在您的HTML中嘗試

   <button type="submit" data-toggle="modal" data-target="#addSomething">Open modal</button>

    <div id="addSomething" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div> <form role="form" id="newModalForm">
          <div class="modal-body">

              <b>Add name:</b>
              <input type="text" placeholder="Name" id="pName" name="pName" required>

              <hr>
          </div>
          <div class="modal-footer">
            <button type="button" id="btnCloseIt" class="btn btn-default" data-dismiss="modal">Close</button>
              <input type="submit" id="btnSaveIt" class="btn btn-default"  value="Add">
          </div>
          </form>
        </div>
      </div>
    </div>