Question

The form validation works fine, so if u leave the email input blank and HIT submit ONCE, it will throw the error msg. BUT when u fill out the email [input] field, i had to HIT the “submitBtn” TWICE or sometimes even more to actually display the result.

so this is the script :

$('#RetrieveQuote2').validate({
    rules: {
        email: {
            required: true,
            email: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertBefore(element);
    },

    submitHandler: function() {
        $('input#submitBtn').bind('click', function() {
            var content = $("input#email").val();
            if (content == "[e-mail]") {
                $('.quotenotfound').show();
                return false;
            } else {
                $('form#RetrieveQuote2').submit();

                formValidationSubmitted = true;

                if (!$('#RetrieveQuote2').valid()) {
                    $('.errorMessage').show();
                }

                $("input#submitBtn").colorbox({
                    href: function() {
                        var url = $(this).parents('form').attr('action');
                        var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
                        return url + '?' + ser;
                    },
                    innerWidth: "780",
                    innerHeight: "450",
                    iframe: true
                });
            } // end of else
        });
    } // end of submitHandler
});

And below is the HTML form :

<form name="RetrieveQuote2" id="RetrieveQuote2" action="overlays/quotelist.php" method="get">
  <fieldset class="cf">
    <legend>email</legend>
    <label>Your Email</label>
    <input type="text" name="email" id="email" value="" maxlength="25"/>
    <div class="submit">
      <input type="submit" name="RetrieveQuote" class="rqSubmitBtn" id="submitBtn" value="SUBMIT" />
    </div>
  </fieldset>
</form>

Answer 1

The problem is that you are trying to add a handler to the submit button inside of your submit handler.

So, on the first click, the validate handler is called (from the click handler that it adds automatically), and then your click handler is added, but not run. The second click, you add another click handler, and then the one you added the first time is called.

The validate plugin should add the handler automatically for you.

Remove $('input#submitBtn').bind('click', function() { around your submit handler contents.

You also don’t need $('form#RetrieveQuote2').submit(); This will also happen automatically after the submit handler.

Demo: http://jsfiddle.net/asrfV/