電子郵件驗證，帶Lightbox表單的按鈕單擊？

Question

現在，我正在使用市場營銷自動化系統Marketo處理電子郵件的退訂頁面。 目前，我有一個帶有一個按鈕的電子郵件表單，該按鈕發芽了一個燈箱表單，要求您進行確認。 我從中提取的代碼不適用於必需的標簽/電子郵件驗證，但我對其進行了一些改動以使其正常工作。 這是問題所在：

如果您無法輸入有效的電子郵件並單擊“取消訂閱”提交按鈕，則會在消息旁邊顯示燈箱表單，提示用戶輸入有效的電子郵件。 這不是什么大問題，但看起來不是很好，我希望燈箱表單僅在電子郵件有效時才會顯示。 這是我在說什么的圖片：

。

我對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 Email輸入上使用Javascript的.checkValidity() API即可確保它有效，然后再繼續。 我已經更新了您的小提琴，以便您可以實際使用它： https : //jsfiddle.net/r6psz2bq/1/