Question

我希望在电子邮件未经过验证时显示我的div。并隐藏它。

这是我尝试过的，但它不起作用。

$("#fes-email").on("change.validation keyup.validation", function () {
    var email = $(this).val(); 
    $("#fes-submit").prop("disabled", email.length == 0 || !isValidEmailAddress(email));
    $('#fes-form').submit(function () { 
        return !$("#fes-submit").is(':disabled') 
        $("#notification-container").show("slide");
    });
}).trigger('change.validation');

Answer 1

在显示之前退出该功能。

$('#fes-form').submit(function () { 
    return !$("#fes-submit").is(':disabled')    <---exits function
    $("#notification-container").show("slide");  <-- will never be called
});

你有一个更大的问题。在每次更改时，您都会将提交处理程序绑定到表单。那很不好。获取更改事件的提交处理程序OUT。

(function() {

  var isValid = false;

  $("#fes-email").on("change.validation keyup.validation", function() {
    var email = $(this).val();
    isValid = email.length && isValidEmailAddress(email);
  }).trigger('change.validation');

  $('#fes-form').submit(function() {
    if (isValid) { 
        $("#notification-container").slideUp();
    } else { 
        $("#notification-container").slideDown();
    }
    return isValid;
  });

}());

function isValidEmailAddress(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);
}

#notification-container {
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="fes-form">
  <label for="fes-email">Email</label>
  <input type="text" id="fes-email" name="fes-email" class="validation" />
  <input type="submit" />
</form>
<div id="notification-container">Invalid Email</div>

验证电子邮件时显示<div> Jquery </div>

1 个答案: