按钮上的灯箱形式的电子邮件验证单击？

Question

现在我正在使用营销自动化系统Marketo的电子邮件取消订阅页面。目前，我有一个带有按钮的电子邮件表单，该按钮发出灯箱形式要求确认。我从中提取的代码不能与所需的标签/电子邮件验证一起使用，但我稍微修改了它以使其工作。问题在于：

如果您未能输入有效的电子邮件并点击＆＃34;取消订阅＆＃34;提交按钮，灯箱表单旁边会显示消息，告知用户输入有效的电子邮件。这不是一个巨大的交易，但它看起来不是很好，我希望只有在电子邮件有效时才能显示灯箱形式。这是我正在谈论的图片：

我对HTML5的了解有限，所以我不知道这是否可行或如何做到这一点。任何帮助表示赞赏！

另外，以下是我使用的代码：https://jsfiddle.net/r6psz2bq/（主要代码段）：

<form id="mktoForm_1008"></form>
<form>
<input id="Email" type="email" placeholder="Email address" required     size = "55px">
<button id="lightboxButton" type="submit"         onclick="submitform()">Unsubscribe</button>
</form>

Answer 1

您只需要在HTML 5电子邮件输入中使用Javascript的.checkValidity() API，以确保它在继续之前有效。我已经更新了您的小提琴，以便您可以看到它的实际效果：https://jsfiddle.net/r6psz2bq/1/