Question

我正在将colorbox与JQuery验证插件结合使用。然而，div弹出窗体在验证失败时关闭表单或者不应该是空的电子邮件。我有一个简单的 - 电子邮件，订阅。

 <a id="hidden_link" style="display:none" href="#mc_embed_signup">empty</a>
<div style="display: none;">
<div id="mc_embed_signup">
    <form action="http://COM.us7.domain.com/subscribe/post?u=12345&amp;id=12345" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <label for="mce-EMAIL">Subscribe to Us</label>
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
    </form>
</div>

$("#hidden_link").colorbox({
    width: "30%",
    height: "200px",
    closeButton: false,
    scrolling: false,
    overlayClose: false,
    transition: "none",
    open: true,
    inline: true,
    href: "#mc_embed_signup",
    onComplete: function () {
        $('selector').validate({})
    }
});


$("#mc-embedded-subscribe-form").validate({
    rules: {
        'mce-EMAIL': {
            required: true,
            email: true
        }
    }
});

Answer 1

尝试

jQuery validate plugin规则适用于name选择器

$("#mc-embedded-subscribe-form").validate({
    rules: {
        EMAIL: { //changed 'mce-EMAIL' to EMAIL (name of the form filed)
            required: true,
            email: true
        }
    }
});

<小时/> jQuery Validate插件会在不包含时自动添加novalidate属性。

~~从novalidate~~ 中删除form属性

<小时/> 在OP的评论

之后更新了代码

$("#mc-embedded-subscribe-form").validate({
    rules: {
        EMAIL: { //changed 'mce-EMAIL' to EMAIL (name of the form filed)
            required: true,
            email: true
        },
        submitHandler: function (form) {
            form.submit().hide(); //this will submit and hide the form
        }
    }
});

ColorBox - 弹出窗体关闭验证失败

1 个答案: