求助：将《JavaScript & jQuery实战手册》表单验证代码移至外部文件失效

作为刚接触JavaScript和jQuery的新手，我最近在做在线课程的表单验证作业时遇到了一个棘手的问题：只要把表单验证的JS/jQuery代码移到外部文件里，验证功能就直接失效了；哪怕是照着《JavaScript & jQuery实战手册》里的代码抄过来，也还是一样的情况。试了好几种调整方法都没搞定，现在把相关代码贴出来，求各位大佬帮忙看看怎么解决这个问题！

我的代码片段 #

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<div class="wrapper">
  <header>
    JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
  </header>
  <div class="content">
    <div class="main">
      <h1>Signup</h1>
      <form action="process.html" method="post" name="signup" id="signup">
        <div>
          <label for="name" class="label">Name </label>
          <input name="name" type="text" class="required" id="name" title="Please type your name.">
        </div>
        <div>
          <label for="email" class="label">E-mail Address</label>
          <input name="email" type="text" id="email">
        </div>
        <div>
          <label for="password" class="label">Password</label>
          <input name="password" type="password" id="password">
        </div>
        <div>
          <label for="confirm_password" class="label">Confirm Password</label>
          <input name="confirm_password" type="password" id="confirm_password">
        </div>
        <div>
          <span class="label">Hobbies</span>
          <input name="hobby" type="checkbox" id="heliskiing" value="heliskiing" class="required" title="Please check at least 1 hobby.">
          <label for="heliskiing">Heli-skiing</label>
          <input name="hobby" type="checkbox" id="pickle" value="pickle">
          <label for="pickle">Pickle eating</label>
          <input name="hobby" type="checkbox" id="walnut" value="walnut">
          <label for="walnut">Making walnut butter</label>
        </div>
        <div>
          <label for="dob" class="label">Date of birth</label>
          <input name="dob" type="text" id="dob" class="date" title="Please type your date of birth using this format: 01/19/2000">
        </div>
        <div>
          <label for="planet" class="label">Planet of Birth</label>
          <select name="planet" id="planet" class="required" title="Please choose a planet.">
            <option value="">--Please select one--</option>
            <option value="earth">Earth</option>
            <option value="mars">Mars</option>
            <option value="alpha centauri">Alpha Centauri</option>
            <option value="forget about it">You've never heard of it</option>
          </select>
        </div>
        <div>
          <label for="comments" class="label">Comments</label>
          <textarea name="comments" cols="15" rows="5" id="comment"></textarea>
        </div>
      </form>
    </div>
  </div>
</div>

外部JS文件中的验证代码 #

$(document).ready(function() {
  $('#signup').validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        rangelength:[8,16]
      },
      confirm_password: {
        equalTo:'#password'
      },
      spam: "required"
    }, // end rules
    messages: {
      email: {
        required: "Please supply an e-mail address.",
        email: "This is not a valid email address."
      },
      password: {
        required: 'Please type a password',
        rangelength: 'Password must be between 8 and 16 characters long.'
      },
      confirm_password: {
        equalTo: 'The two passwords do not match.'
      }
    },
    errorPlacement: function(error, element) {
      if ( element.is(":radio") || element.is(":checkbox")) {
        error.appendTo( element.parent());
      } else {
        error.insertAfter(element);
      }
    }
  }); // end validate
}); // end ready

CSS样式代码 #

#signup label.error {
  font-size: 0.8em;
  color: #F00;
  font-weight: bold;
  display: block;
  margin-left: 215px;
}
#signup input.error, #signup select.error {
  background: #FFA9B8;
  border: 1px solid red;
}

内容的提问来源于stack exchange，提问作者Casey Howell