javascript - 如何使用jQuery validate验证此Bootstrap模式

我正在尝试在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"
    }
  });
});

最佳答案

在您的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>