尝试使用 jquery.validation 显示错误

Trying to display errors with jquery.validation

我正在尝试使用 jquery.validation 插件显示错误,但我没有收到任何消息。

当我点击提交时,我在空白字段上收到无效警报,但在摘要中没有任何消息 div。谁能告诉我我错过了什么?

谢谢

 <div class="form-group form-group-sm">
  <label class="control-label requiredField" for="SW">
   Social Worker
   <span class="asteriskField">
    *
   </span>
  </label>
  <input class="form-control" id="SW" name="SW" type="text" required="required"/>
 </div>

 <div class="form-group form-group-sm">
  <label class="control-label requiredField" for="NMN">
   Named Nurse
   <span class="asteriskField">
    *
   </span>
  </label>
  <input class="form-control" id="NMN" name="NMN" type="text" required="required"/>
   </div>

<div id="summary"></div>

 <div class="form-group">
  <div>
   <button class="btn btn-primary " name="submit" id="submit" type="submit">
    Submit
   </button>


<script>
$("#mform").validate({
    showErrors: function(errorMap, errorList) {
        $("#summary").html("Your form contains "
        + this.numberOfInvalids()
        + " errors, see details below.");
        this.defaultShowErrors();
    }
});
</script>

工作Fiddlehttp://jsfiddle.net/sandenay/4psggt9q/

我已经添加了 jQueryjQuery Validate 插件

您的 JS 代码:

$(document).ready(function(){
     $("#submit").click(function(){
        $("#mform").validate({
           showErrors: function(errorMap, errorList) {

             $("#summary").html("Your form contains "
            + this.numberOfInvalids()
             + " errors, see details below.");
           this.defaultShowErrors();
        }
    });


  });
});

HTML:

<form id="mform"> 
  .........other html code............
   // Observe that I have removed type="submit" below code
    <button class="btn btn-primary " name="submit" id="submit">
       Submit
    </button>
 </form>

defaultShowErrors() 显示 input 字段之外的错误。

numberOfInvalids() 显示所有错误的计数。