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

Question

我正在尝试使用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>

这是JavaScript / jQuery：

$(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;
}});

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

Answer 1

您可以使用email类型作为输入，并使用按钮submit来触发验证输入。我添加了一个函数来检查电子邮件是否与正则表达式有效。 （在这里找到：How to validate email address in JavaScript?）你必须添加jQuery Validation Plugin

$(document).ready(function(){
  
  $('#survey input').on('keyup', function(){
   var validator = $("#survey").validate();
  if (validator.form() && validateEmail($('#email').val())) {
    $('#submitButton').prop('disabled', false);
    $('#submitButton').removeClass('disabled');
  }
    else{
      $('#submitButton').prop('disabled', true);
      $('#submitButton').addClass('disabled');
      }
  }  );

  function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email.toLowerCase());
}
  /*
    Confirmation Window
  */
  $('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';
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<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="email" name= "email" class="validate" required="true" aria-required="true">
	        <label for="email">Email Address</label>
	      </div>

  <button type="submit" form="survey" value="Submit" class="waves-light btn red lighten-2 disabled" disabled='disabled' id="submitButton">Submit</button>
		</form>

由于jQuery验证插件导致的StackOverflow片段错误，但它在CodePen中有效