如果表单验证,则Jquery验证启用弹出窗口

时间:2013-10-11 13:31:08

标签: javascript jquery html forms jquery-validate

我在表单上使用jQuery Validation插件http://jqueryvalidation.org/。我也使用了一些javascript,这意味着表单的响应在弹出窗口中打开。我遇到的问题是,如果表单未验证但用户尝试提交,则会出现一个空白的弹出窗口。我希望弹出窗口仅在表单验证时出现。这是我的代码:

HTML

<form id="contactform" action="formmail.php" method="post" name="contactform" onsubmit="popupform(this, 'join')">
    <input name="env_report" type="hidden" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
    <input name="recipients" type="hidden" value="me@mydomain.co.uk" />
    <input type="hidden" value="http://www.mydomain.co.uk/thankyou.html" name="good_url" />
    <input type="hidden" value="http://www.mydomain.co.uk/error.html" name="bad_url" />
    <input type="text" placeholder="Name..." name="realname" class="input-text required" required />
    <input type="email" placeholder="Email..." name="email" class="input-text required" required />
    <input type="text" placeholder="Phone..." name="phone" class="input-text required" required />
    <input class="submit button" name="Submit" type="submit" value="Submit" />
</form>

的Javascript

$(document).ready(function() {
    $("#contactform").validate();
});

function popupform(contactform, windowname){
    if (! window.focus)return true;
    window.open('', windowname, 'height=250,width=500,scrollbars=no');
    contactform.target=windowname;
    return true;}

如果你能提供帮助我会很感激。谢谢。

1 个答案:

答案 0 :(得分:1)

不是使用表单的onsubmit属性调用popupform,而是从验证插件的提交处理程序中调用它。

$(document).ready(function() {
    $("#contactform").validate({
        submitHandler: function(form) {
            popupform(form, 'join');

            // do other things for a valid form
            form.submit();
        }
    });
});