Jquery。
我想
在电子邮件未验证时显示我的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');
在显示函数之前退出该函数。
$('#fes-form').submit(function () {
return !$("#fes-submit").is(':disabled') <---exits function
$("#notification-container").show("slide"); <-- will never be called
});
而且你有一个更大的问题。在每次更改时，您都会将提交处理程序绑定到表单。这很糟糕。将提交处理程序从更改事件中取出。
(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>