我不得不多次点击提交按钮才能使表单正常工作(结果加载到弹出的颜色框中)

Question

表单验证工作正常，因此如果您将电子邮件输入留空并点击提交一次，它将抛出错误消息。但当你填写电子邮件[输入]字段时，我必须点击"submitBtn"两次，有时甚至更多才能真正显示结果。

这就是脚本：

$('#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
});

下面是HTML表单：

<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

问题是您正试图将处理程序添加到提交处理程序内部的提交按钮中。

因此，在第一次单击时，会调用验证处理程序（从它自动添加的单击处理程序中调用），然后添加您的点击处理程序，但不会运行。第二次单击时，添加另一个单击处理程序，然后调用第一次添加的处理程序。

验证插件应该自动为您添加处理程序。

删除提交处理程序内容周围的$('input#submitBtn').bind('click', function() {。

您也不需要$('form#RetrieveQuote2').submit();。这也将在提交处理程序之后自动发生。

演示：http://jsfiddle.net/asrfV/