title: jquery validation does not work in php
body: <p>Ok it does work in PHP but if I modify the file so that my index.php looks like this</p>
  
  <pre><code>&lt;?php
  
  include('header');
  include('main_content');
  include('footer');
  
  ?&gt;
  </code></pre>
  
  <p>then it does not work.</p>
  
  <p>Here is my rendered hmtl (firefox)</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=MacRoman"&gt;
  &lt;title&gt;This is a test page&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="js/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.min.js" &gt;&lt;/script&gt;
  &lt;script src="js/main.js" &gt;&lt;/script&gt;
  &lt;LINK href="css/other1.css" rel="stylesheet" type="text/css"&gt;
  &lt;LINK href="css/other2.css" rel="stylesheet" type="text/css"&gt;
  &lt;LINK href="css/gallery.css" rel="stylesheet" type="text/css"&gt;
  &lt;LINK href="css/min_jquery.css" rel="stylesheet" type="text/css"&gt;
  &lt;LINK href="css/minified.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;/head&gt;
      &lt;body&gt;
  
  &lt;!-- This is the form ----------&gt;
  
  &lt;form id="form1" method="post" action="jquery_form.php"&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;Name *&lt;/span&gt;&lt;input type="text" name="name" /&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;E-Mail *&lt;/span&gt;&lt;input type="text" name="email" /&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;URL&lt;/span&gt;&lt;input type="text" name="url" /&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;Your comment *&lt;/span&gt;&lt;textarea name="comment" &gt;&lt;/textarea&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;input class="submit" type="submit" value="Submit"&gt;&lt;/div&gt;
      &lt;/form&gt;
  
  &lt;!-- this is the jQuery validation -----------&gt;
  
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;
  
  &lt;/html&gt;&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $("#form1").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."
          },
          errorPlacement: function (error, element) {
                      element.css('background', '#ffdddd');
                  }
        });
      $("#form2").validate({
      rules:{
          name2:"required",
          pass: "required"
      }
  })
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>What could be wrong? I know the query validation does not work if it is not the first include. But it is the first include in the headers. And rendered HTML looks fine. The file are in the js folder.</p>
  
  <p>I have spend a couple of hours on this.</p>
  
  <h2>This code works</h2>
  
  <p>This is rendered code of another html page that does works. jQuery won't submit the form if validation fails.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &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="js/jquery.validate.js"&gt;&lt;/script&gt;
  
    &lt;style type="text/css"&gt;
      * { font-family: Verdana; font-size: 11px; line-height: 14px; }
      .submit { margin-left: 125px; margin-top: 10px;}
      .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
      .form-row { padding: 5px 0; clear: both; width: 700px; }
      label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
      input[type=text], textarea { width: 250px; float: left; }
      textarea { height: 50px; }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form id="form1" method="post" action="jquery.php"&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;Name *&lt;/span&gt;&lt;input type="text" name="name" /&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;E-Mail *&lt;/span&gt;&lt;input type="text" name="email" /&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;URL&lt;/span&gt;&lt;input type="text" name="url" /&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;span class="label"&gt;Your comment *&lt;/span&gt;&lt;textarea name="comment" &gt;&lt;/textarea&gt;&lt;/div&gt;
        &lt;div class="form-row"&gt;&lt;input class="submit" type="submit" value="Submit"&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;p&gt;
  &lt;hr&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $("#form1").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."
          },
          errorPlacement: function (error, element) {
                      element.css('background', '#ffdddd');
                  }
        });
      $("#form2").validate({
      rules:{
          name2:"required",
          pass: "required"
      }
  })
      });
    &lt;/script&gt;
  </code></pre>