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

Question

我试图在 Bootstrap 模态中得到 "required" 警告，所以在输入字段中有一些有效数据之前不可能提交它，但是如果不是它只是关闭它.知道可能缺少什么吗？

这是笔：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>

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

How to validate this Boostrap modal with jQuery validate

javascript

jquery

jquery-validate

twitter-bootstrap