title: jQuery Validation plugin won't validate when in click event handler of
body: <pre><code>$("#tournamentDesignTabs").tabs();
  $("#tournamentDesign").validate();
  $("#createTournament").click(function(){
      if($("#tournamentDesign").validate()){
      $.post(
          "createTournament.php",  
          {tournamentName: $("#tournamentName").val(), district: $("#district").val(), region: $("#region").val(), location: $("#location").val(), date: $("#date").val(), time: $("#time").val(), logo: $("#logo").val()},  
          function(responseText){  
              $("#result").html(responseText);  
          },  
          "html"  )
      } else {
          alert("oh no");
      }
      }
  );
  </code></pre>
  
  <p>So above is the script I'm using to validate some form information then enter it into a database. The problem I'm encountering is that the validate function doesn't seem to do anything when attached to the span's click event handler. I also noticed that onfocusout doesn't seem to be behaving properly either. Any suggestions or ideas as to what I'm doing wrong. I know I have the plug in included correctly because the validate function still works on when I submit the form. I'd prefer ajax though. Thanks!</p>
  
  <p>EDIT: As one answer said below, they think having the html would help so here is the page. Every last bit of code and content. I know it's dirty and messy, but I'm learning and will clean it up soon. Anyways here it is:</p>
  
  <pre><code>&lt;!DOCTYPE HTML SYSTEM&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Tournament Designer&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" type="text/css" media="all" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="stylesheet.css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.ui.touch-punch.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="code.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="topBanner"&gt;Tournament Designer&lt;/div&gt;
  &lt;br/&gt;
  &lt;form id="tournamentDesign" method="post" style="display:inline;"&gt;
  &lt;span id="tournamentDesignTabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tabs-1"&gt;Details&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-2"&gt;Pricing &amp; Promo Codes&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-3"&gt;Divisions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-4"&gt;Mats&lt;/a&gt;&lt;/li&gt;
          &lt;span id="createTournament" class="pseudoButton"&gt;Create Tournament&lt;/span&gt;
          &lt;input type="submit" value="submit"/&gt;
      &lt;/ul&gt;
      &lt;div id="tabs-1"&gt;
          &lt;p&gt;Enter the details concerning the tournament name, location, date, etc. here.&lt;br/&gt;&lt;em&gt;(* denotes a required field)&lt;/em&gt;&lt;/p&gt;
          Tournament Name:&lt;input id="tournamentName" name="tournamentName" value="" class="required"/&gt;*&lt;br/&gt;
          District:&lt;select id="district" name="district" value="" class="required"&gt;
                    &lt;option value="0"&gt;Provo&lt;/option&gt;
                    &lt;option value="1"&gt;SLC&lt;/option&gt;
                  &lt;/select&gt;*&lt;br&gt;
          Region:&lt;select id="region" name="region" value="" class="required"&gt;
                    &lt;option value="0"&gt;West-USA&lt;/option&gt;
                  &lt;/select&gt;*&lt;br/&gt;
          Location:&lt;input id="location" name="location" value="" class="required"/&gt;*&lt;br/&gt;
          Date:&lt;input id="date" name="date" value="" class="required date"/&gt;*&lt;br/&gt;
          Time:&lt;input id="startTime" name="startTime" value="" class="required"/&gt;*&lt;br/&gt;
          Logo:&lt;input id="logo" name="logo" value="" class="url"/&gt;*&lt;span id="addPicture" onclick="displayPicture('tournamentLogo',document.getElementById('logo').value)" class="pseudoButton"&gt;Add&lt;/span&gt;&lt;span id="removePicture" onclick="removePicture('tournamentLogo')" class="pseudoButton"&gt;Remove&lt;/span&gt;&lt;br/&gt;
          &lt;span id="tournamentLogo" class="tournamentLogo"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="tabs-2"&gt;
          &lt;p&gt;Set the pricing structure here. You can add as many structures as you like. To remove a structure select it in the textbox below including the comma and delete it.&lt;/p&gt;
          # of Divisions:&lt;input id="divisionCount" name="divisionCount" value="" size="3"/&gt; Price:&lt;input id="divisionPrice" name="divisionPrice" value="" size="3"/&gt;&lt;span id="addDivisionPricing" onclick="addDivisionPricing()" class="pseudoButton"&gt;Add&lt;/span&gt;&lt;br/&gt;
          Pricing Structures:&lt;br/&gt;
          &lt;span id="divisionPricingInfo" name="divisionPricingInfo" class="divisionPricingInfo"&gt;&lt;/span&gt;&lt;br/&gt;
          &lt;p&gt;Add Promo Codes Here. A valid Promo Code will contain any character between A-Z and 0-9. When creating a Promo Code you can set it to discount by a percentage or fixed dollar amount. Percentage is selected by default. To remove a promo code follow the same steps as above.&lt;/p&gt;
          Promo Codes:&lt;/br&gt;
          Code:&lt;input id="promoCode" name="promoCode" value="" size="3"/&gt; Discount(Percent&lt;input type="radio" name="percentorDollar" value="0" checked&gt;[%] or Dollars&lt;input type="radio" name="percentorDollar" value="1"&gt;[$]): &lt;input id="promoCodeValue" name="promoCodeValue" value="" size="3"/&gt;&lt;span id="addPromoCode" onclick="addPromoCode()" class="pseudoButton"&gt;Add&lt;/span&gt;&lt;br/&gt;
          &lt;span id="promoCodeInfo" name="promoCodeInfo" class="divisionPricingInfo"&gt;&lt;/span&gt;&lt;br/&gt;
      &lt;/div&gt;
      &lt;div id="tabs-3"&gt;
          &lt;p&gt;Skill &amp; Weight Divisions&lt;/p&gt;
          Enter Top Level Divisions Here:&lt;input id="tournamentDivisionInput" value="" size=5&gt;&lt;span class="addButton" onclick="addDivisions('tournamentDivisionInfo',document.getElementById('tournamentDivisionInput').value,true)"&gt;+&lt;/span&gt;
          &lt;span id="tournamentDivisionInfo" class="divisionInfo" style="width:800px;"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="tabs-4"&gt;
          &lt;p&gt;Mat Design&lt;/p&gt;
          Add Mat Area &lt;input id="matAreaInput" size=3/&gt; With 4 mats. &lt;span class="pseudoButton" onclick="addMatArea(document.getElementById('matAreaInput').value)"&gt;Add&lt;/span&gt;&lt;br/&gt;
          &lt;span class="divisionPricingInfo" id="matAreaInfo"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/span&gt;
  &lt;/form&gt;
  &lt;span id="result" class="tournamentInfo"&gt;I'm here!&lt;span&gt;
  &lt;script type="text/javascript"&gt;
  $("#tournamentDesignTabs").tabs();
  //$("#tournamentDesign").validate();
  $("#createTournament").click(function(){
      if($("#tournamentDesign").validate()){
      $.post(
          "createTournament.php",  
          {tournamentName: $("#tournamentName").val(), district: $("#district").val(), region: $("#region").val(), location: $("#location").val(), date: $("#date").val(), time: $("#time").val(), logo: $("#logo").val()},  
          function(responseText){  
              $("#result").html(responseText);  
          },  
          "html"  )
      } else {
          alert("oh no");
      }
      }
  );
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>