如何使用jQuery validate验证此Boostrap模式

Question

I'm trying to get that "required" warning in Bootstrap modal, so it's not possible to submit it before there's some valid data in the input field, however for not it just closes it. Any idea what is missing perhaps?

Here's the pen: 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

Try this in your 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>