Question

我最近提出了一个问题，即如何通过电子邮件验证来处理带有和取消订阅按钮的表单，该按钮会显示确认表单。有人通过告诉我使用Javascript的.checkValidity() API来帮助我，该API用于检查验证，但引起了另一个问题：现在，当用户输入有效的电子邮件并点击“＃34;取消订阅＆＃34”时;，它无法加载灯箱表格并导致500错误。

我最接近工作的是删除<form/>封装，如果该封面无效，则该封装不允许用户提交电子邮件，但它没有＆＃39} ; t向用户提供任何通知/为什么它无效。如果用户输入有效的电子邮件，则一切都可以正常工作。

这里是有问题的代码，以及小提琴：

＆＃13;

   <script src="//app-ab21.marketo.com/js/forms2/js/forms2.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function(e) {
    MktoForms2.loadForm('//app-ab21.marketo.com',  '726-BWN-173', 1008);
    MktoForms2.whenReady(function(form) {
      document.querySelector('#lightboxButton').addEventListener('click', function(e) {
        if(Email.checkValidity()) {
          form.addHiddenFields({
            Email: Email.value
          });
          MktoForms2.lightbox(form).show();
        }
      });
    });
  });
document.getElementById("mktoForm_1008").onsubmit= function(e){
     e.preventDefault();
}
</script>
<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>

＆＃13;

小提琴与CSS：https://jsfiddle.net/r6psz2bq/1/

谢谢！

使用checkValidity进行电子邮件验证后，灯箱形式出现500错误

0 个答案: