jquery - 验证插件无法正常工作或显示消息

Question

我有一个多步骤注册表单，我想使用jquery验证插件来显示验证消息。我已经尝试了多次，但即使它没有显示任何错误也无法工作。我试图改变一些规则和设置，但它不能工作。 表格如下：

<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
    <li class="active">Account Setup</li>
    <li>Valuation Details</li>
    <li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
    <h2 class="fs-title">Create your account</h2>
    <h3 class="fs-subtitle">You need this to login</h3>
    <input type="text" name="email" placeholder="Email"/>
  <input type="text" name="username" placeholder="Username" />
    <input type="password" name="pass" id="pass" placeholder="Password" />
    <input type="password" name="cpass" id="cpass" placeholder="Confirm Password" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

<fieldset>
    <h2 class="fs-title">Valuation Details</h2>
    <h3 class="fs-subtitle">Your valuation certification</h3>
    <input type="text" name="names" placeholder="Company in usage" />
    <input type="text" name="facebook" placeholder="Company TIN No." />
    <input type="text" name="gplus" placeholder="Certification No." />
  <input type="file" name="file" placeholder="Upload your 2016 certification pdf">
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
    <h2 class="fs-title">Personal Details</h2>
    <h3 class="fs-subtitle">We will never sell it</h3>
    <input type="text" name="fname" placeholder="Valuer names" />
    <input type="text" name="lname" placeholder="Address" />
    <input type="text" name="phone" placeholder="Phone" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>

有多个字段集，因为这是一个多步骤注册过程。

我已经链接了jquery.min.css和jquery.validate.js文件。

我的javascript是：

  $("#msform").validate();
  $("#msform").validate({
    rules: {
  names: "required",
  lastname: "required",
  username: {
    required: true,
    minlength:5
  },
  pass: {
    required: true,
    minlength: 6
  },
  cpass: {
    required: true,
    minlength: 6,
    equalTo: "#pass"
  },
  email: {
    required: true,
    email: true
  },
  agree: "required"
},
messages: {
  username: {
    required: "Please enter a username",
    minlength: "Your username must consist of at least 5 characters"
  },
  pass: {
    required: "Please provide a password",
    minlength: "Your password must be at least 6 characters long"
  },
  cpass: {
    required: "Please provide a password",
    minlength: "Your password must be at least 6 characters long",
    equalTo: "Please enter the same password as above"
  },
  email: "Please enter a valid email address",
}

}）;

我想知道如何让它与显示的消息一起工作。谢谢。