Question

我仍然是javascript和jQuery的新手。在进行涉及表单验证的作业之前，我正在做一个涵盖绝对基础知识的在线课程。对于我的生活，我不能这样做，我已经寻找不同的方法。无论我在将javascript放入外部文件时尝试什么，我都会失去验证。或者我尝试的方法并不涵盖我需要的所有内容，只要我添加额外内容，我就需要它不起作用。

我一直在使用Missing Manual的Javascript＆amp; jQuery书帮助我更好地理解语言，但我回到了同样的问题 - 一旦我将javascript和jQuery移动到外部文件，我就失去了所有的验证。

我已经将Missing Manual手册中的代码包含在内了（我知道这有点无关紧要，但这个想法是我曾经想过如何让外部文件正常工作我会用同样的方法来处理我的代码所以我还在为自己学习，而不是让别人为我做任务。

tldr;我无法将javascript / jQuery转换为外部文件而不会完全失去验证

$(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

#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;
}

<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="comments">   </textarea>
     </div>
     <div class="labelBlock">Would you like to receive annoying e-mail froM
    US? </div>
     <div class="indent">
       <input  type="radio" name="spam" id="yes" value="yes" class="required" title="Please select an option">
       <label for="yes">Yes</label>
       <input type="radio" name="spam" id="definitely" value="definitely">
       <label for="definitely">Definitely</label>
       <input type="radio" name="spam" id="choice" value="choice">
       <label for="choice">Do I have a choice?</label>
      </div>
      <div>
        <input type="submit" name="submit" id="submit" value="Submit">
      </div>
    </form>
    </div>
  </div>
  <footer>
    <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
  </footer>
</div>

制作缺少的手册js＆amp; jQuery外部而不是内联

0 个答案: