Validating emails with jQuery

I have a modal dialog from jQuery UI that appears when I press a button. Here's the jQuery code concerning the modal dialog:

     $('#eb1').click(function(){
        $('#emailPost').submit();
        $("#emailModal").dialog('close');
     });

     $('#eb2').click(function(){
        $('#emailPost2').submit();
        $("#emailModal").validate({
        rules: {
            emailAddress: {
                required: true,
                email: true
            }
        }
        }).showErrors({"error": "Invalid Email!"});
        $("#emailModal").dialog('close');
     });

Here's the PHP that displays all of this:

echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost'>";
echo "<input type='hidden' value='" . $_SESSION["email"] . "' name='emailAddress'>";
echo "<input type='button' value='Email To Me' id='eb1'/>";
echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>";
echo "</form>";
echo "<h3>Or</h3>";
echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>";
echo "<label name='error'></label>";
echo "<input type='text' value='Enter an Email' class='required email' name='emailAddress' style='display: inline-block;'>";
echo "<input type='button' value='Email' id='eb2'/>";
echo "<input type='hidden' name='passedCoupID' value='" . $coupID . 开发者_如何转开发"'/>";
echo "</form>";

I know that the buttons work fine, and they submit perfectly, but the latter submits regardless of the outcome of the validation. I'm pretty new to jQuery, how can I make it show an error if invalid and not submit unless the email is valid?

$('#eb1').click(function(){
    $('#emailPost').submit();
    $("#emailModal").dialog('close');
 });

 $('#eb2').click(function(){
    $('#emailPost2').submit(function(){
      var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      var address = $("#emailModal").val();
      if(reg.test(address) == false) {
      alert('Invalid Email Address');
      return false;
   }
   else
   {
     return true;
   }
 });

 $("#emailModal").dialog('close');
 });

Looks to me like you call $('#emailPost2').submit(); before you call validate. Won't this submit your form prior to the validation taking place?

When I used the jQuery Validator plugin I declared the validation rules in $(document).ready(). Maybe you should try declaring the rules earlier as opposed to in the button click.

If the modal popup is dynamically created then you could use

$("#emailPost2").live(function() {validation rules});

so that when the form is created it attaches the validation rules.

Is it this validate plugin you're using? http://jquery.bassistance.de/validate/demo/

If so, it looks like you're not quite going about it the right way.

Change the buttons to type="submit", then hook up the validate() calls to emailPost' (if that's even required) and 'emailPost2' in document.ready instead.

$(document).ready(function(){
    $("#emailPost2").validate({ 
        rules: {
            emailAddress: {
                required: true,
                email: true
            }
        }
        }).showErrors({"error": "Invalid Email!"});
});

Have a look at the source code in that link for some examples.