title: Validate HTML form with JQuery
body: <p>Can someone see where I'm going wrong with this form validation? I was using an example I found online and it does not work for me. </p>
  
  <p>I want to validated the input fields with the jquery before passing it on to the server side script. It supposed to print error message next to the field where the user is missing an input.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Register&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style1.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="forms.css" /&gt;
  
   &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $("#registerform").validate({
          rules: {
            username: "required",
            firstname: "required", 
            email: {// compound rule
            required: true,
            passwd: true,
            email: true,
          },
          username:{
              username: true
          },  
          url: {
            url: true
          },
          comment: {
            required: true
          }
          },
          messages: {
            comment: "Please enter a comment."
          }
        });
      });
    &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  
  label { width: 10em; float: left; }
  label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  p { clear: both; }
  .submit { margin-left: 12em; }
  em { font-weight: bold; padding-right: 1em; vertical-align: top; }
  &lt;/style&gt;
   &lt;/head&gt;
  
  &lt;body&gt;
  
  Please register below
  &lt;p /&gt;
                  &lt;form action=" " id="registerform" method="POST"&gt;
  
  
          &lt;table cellspacing="9"&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Username:&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="username" size="30"&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;First name:&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="firstname" size="30"/&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Surname:&lt;/b&gt;   &lt;/td&gt;&lt;td&gt;&lt;input type="text" name="lastname" size="30"/&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Email  : &lt;/b&gt;  &lt;/td&gt;&lt;td&gt;&lt;input type="text" name="email" size="30"/&gt;&lt;/td&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Password :&lt;/b&gt; &lt;/td&gt;&lt;td&gt;&lt;input type="password" name="passwd" size="30"/&gt;&lt;/td&gt;&lt;/tr&gt;
  
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Telephpone:&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="telephone" size="30"/&gt;&lt;/td&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;House No:&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="ad1" size="30"/&gt;&lt;/td&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Street Name:&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="street" size="30"/&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Town/ City:&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="town" size="30"/&gt;&lt;/td&gt;&lt;/tr&gt;
           &lt;tr&gt;&lt;td&gt;&lt;b&gt;Post code:&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="pcode" size="30"/&gt;&lt;/td&gt;&lt;/tr&gt;
  
       &lt;/table&gt;
  
       &lt;p /&gt;
                   &lt;input class="submit" type="submit" value="Sign Up!" /&gt;
                  &lt;input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')"&gt;
                  &lt;/form&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's the code the original code that I got from a <a href="https://www.sitepoint.com/basic-jquery-form-validation-tutorial/" rel="nofollow noreferrer">website somewhere</a> and it works. But I can't seem to use the example in my code.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;Simple Form Validation&lt;/title&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $("#form2").validate({
          rules: {
            name: "required",// simple rule, converted to {required:true}
            email: {// compound rule
            required: true,
            email: true
          },
          url: {
            url: true
          },
          comment: {
            required: true
          }
          },
          messages: {
            comment: "Please enter a comment."
          }
        });
      });
    &lt;/script&gt;
  
    &lt;/head&gt;
  
  
    &lt;body&gt;
      &lt;form id="form2" method="post" action=""&gt;&lt;br /&gt;
        Name * &lt;input type="text" name="name" /&gt; &lt;br /&gt;
        E-Mail *&lt;input type="text" name="email" /&gt; &lt;br /&gt;
  
        URL &lt;input type="text" name="url" /&gt; &lt;br /&gt;
        Your comment * &lt;textarea name="comment" &gt;&lt;/textarea&gt; &lt;br /&gt;
        &lt;input class="submit" type="submit" value="Submit"&gt; 
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Update:</strong> Thanks to @Usman it's now working. One more question though, is it possible to change the default error message instead of the <strong><em>'This field is required'</em></strong> ?</p>
  
  <p>Thanks</p>