validation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Fun</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#signup input.error, #signup select.error {
  background: #FFA9B8;
  border: 1px solid red;
}
</style>
<script src="../_js/jquery.min.js"></script>
<script src="jquery_validate/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
  $('#signup').validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        rangelength: [8, 16]
      },
      confirm_password: {
        equalTo: '#password'
      }
    }, // end rules

    messages: {
      email: {
        required: "Please supply your e-mail address.",
        email: "This is not a valid e-mail 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."
      }
    }, // end messages

    errorPlacement: function(error, element) {
      if (element.is(":radio") || element.is(":checkbox")) {
        error.appendTo(element.parent());
      } else {
        error.insertAfter(element);
      }
    } // end errorPlacement
  }); // end validate()
}); // end ready
</script>
</head>
<body>
<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" id="name" class="required" 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" 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>
</body>
</html>