Javascript 使用Materialize和jQuery进行电子邮件验证

我正在尝试用Materialize创建一个表单来验证一封电子邮件。我首先将提交按钮切换为禁用。理想情况下，当填写并验证电子邮件时，提交按钮将停止禁用，用户可以单击它进入下一页。这是我的HTML：

<form id="survey">

        <div class="input-group">
            <p class="input-header">Enter Your Email</p>
            <div class="input-block input-field">
        <input id="email" type="text" name= "email" class="validate" required="" aria-required="true">
        <label for="email">Email Address</label>
      </div>
      <br></br>

        <a class="waves-light btn red lighten-2 disabled" id="submit">Submit
        <i class="material-icons right">send</i>
        </a>
        <br></br>
        <br></br>
        <br></br>

</form>

---

请让我知道我做错了什么！谢谢

您可以使用

电子邮件

输入和按钮

提交

触发验证输入。 我添加了一个功能来检查电子邮件是否使用正则表达式有效。（可在此处找到：） 你必须加上

$（文档）.ready（函数（）{
$（“#调查输入”）。在（'keyup'，function（）上{
var validator=$（“#调查”）.validate（）；
if（validator.form（）&&validateEmail（$（'#email'）.val（））{
$（“#提交按钮”）.prop（'disabled'，false）；
$（“#提交按钮”）.removeClass（'disabled'）；
}
否则{
$（'submitButton'）.prop（'disabled'，true）；
$（“#提交按钮”）.addClass（'disabled'）；
}
}  );
功能验证电子邮件（电子邮件）{
变量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]+]；
返回re.test（email.toLowerCase（））；
}
/*
确认窗口
*/
$（'body'）。在（'click'，'提交'，函数（）上{
let decision=确认（'您确定要提交调查吗？'）；
如果（决定）{
$.post（'insert.php'，$（'#survey'）.serialize（））；
window.location.href='thankyou.php'；
}
});
});

输入您的电子邮件
电子邮件地址
提交
您能用代码笔复制吗？：）也许你可以看看：@Toodoo我之前试过keyup，但没用：（我将发送一个代码笔！由于使用Materialize framework@Toodoo获得了它！@Toodoo感谢您的耐心！它仍然不起作用。如果您在我的代码笔上获得了它，您可以发送该链接吗？已编辑，请在我的帖子末尾查找代码笔
$(document).ready(function(){
  $('.parallax').parallax();

$('body').on('click', '#submit', function() {
let decision = confirm('Are you sure you would like to submit your survey?');
if (decision) {
  $.post('insert.php', $('#survey').serialize());
 window.location.href = 'thankyou.php';
}
});

$('body').on('click', 'input', function() {
checkValidity($(this));
});
$('body').on('focusout', 'input', function() {
checkValidity($(this));
});

function checkValidity (current) {
let isValid = true;
if (!current.val()) {
  isValid = false;
} else {
  isValid = iteratatingForm(current);
}
const submit = $('#submit');
if (isValid) {
  submit.removeClass('disabled');
} else {
  if (!submit.hasClass('disabled')) {
    submit.addClass('disabled');
  }
}
}

function iteratatingForm (current) {
if (!document.forms['survey']['email'].value) return false;
return true;
}});