title: jQuery and Ajax Submits + Modal Dialog
body: <p><strong>I'm trying to accomplish the following task:</strong></p>
  
  <p><strong>1.</strong> Make a modal box appear when #emailJQButton is clicked (presume this button already exists).</p>
  
  <p><strong>2.</strong> Validate the input from the form #emailPost2 to make sure that it exists and is a proper email format.</p>
  
  <p><strong>3.</strong> If the input is valid, when #eb2 is clicked, submit the form via Ajax (no need for any data back, only a submit), and closes the modal window.</p>
  
  <p><strong>The problems I am having are:</strong></p>
  
  <p><strong>1.</strong> <code>$("button, input:submit, input:button, a#jql, input:radio").button();</code> ceases to work if I make one of these: <code>$(document).ready(function() {...});</code> (the button() is in a regular <code>$(function() {...});</code>)</p>
  
  <p><strong>2.</strong> No matter how I try it, I cannot get the form to stop submitting and show an error message when it is invalid.</p>
  
  <p>Here's the plugin that I'm using: <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></p>
  
  <p><strong>Here's the form that is being validated:</strong></p>
  
  <pre><code>&lt;form action="php/emailPost.php" method="POST" class="inline" id="emailPost2"&gt;
  &lt;label name="error"&gt;&lt;/label&gt;
  &lt;input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;"&gt;
  &lt;input type="button" value="Email" id="eb2"/&gt;
  &lt;input type="hidden" name="passedCoupID" value="1"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Here's all of my jQuery code:</strong></p>
  
  <pre><code>$(function() {
  $("button, input:submit, input:button, a#jql, input:radio").button();
  
  $('#emailJQButton').click(function() {
      $("#emailModal").dialog('open');
  });
  
  $('#eb1').click(function() {
      $('#emailPost').submit();
      $("#emailModal").dialog('close');
  });
  
  $('#eb2').click(function() {
      $('#emailPost2').submit();
      $("#emailModal").dialog('close');
  });
  });
  </code></pre>
  
  <p>The above doesn't actually function as I want, but it's the last working code I had - it submits the forms ignoring validation, and it works fine. I just need to modify it to validate the email.</p>
  
  <p><strong>Here is the file that the submit should call (emailPost.php)</strong></p>
  
  <pre><code>&lt;?php
  $passedCoupID = $_REQUEST["passedCoupID"];
  $emailAddress = $_REQUEST["emailAddress"];
  
  //some database queries and an email function
  
  echo "Sent.";
  ?&gt;
  </code></pre>
  
  <p><strong>Lastly, here is #emailModal:</strong></p>
  
  <pre><code>&lt;div id="emailModal"&gt;
  &lt;form action="php/emailPost.php" method="POST" class="inline" id="emailPost2"&gt;
  &lt;label name="error"&gt;&lt;/label&gt;
  &lt;input type="text" value="Enter an Email" class="required email" name="emailAddress" style="display: inline-block;"&gt;
  &lt;input type="button" value="Email" id="eb2"/&gt;
  &lt;input type="hidden" name="passedCoupID" value="1"/&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm pretty new to jQuery, and I've been searching forever and everywhere, but I can't find the solution to this problem. Any help?</p>