Jquery表单验证，仅第一次工作的focusout事件答案

【问题标题】：Jquery form validation, focusout event working only for first timeJquery表单验证，仅第一次工作的focusout事件
【发布时间】：2016-01-26 17:30:53
【问题描述】：

我想立即使用 jquery 验证表单。实际上，验证发生在关注焦点之后。但是验证只发生在第一次聚焦而不是下一个聚焦事件。这是我的fiddle 链接。我想对每个焦点事件进行验证，请帮助... TIA

$(document).ready(function() {
$('#emailid').focusout(function() {
    var emailCheck = $(this).val();
    if ($.trim(emailCheck).length == 0) {
        $(".validation-error").toggleClass("visible").delay(3000).fadeOut(900);
    }
    if (validateEmail(emailCheck)) {
        $(".validation-success").toggleClass("visible").delay(3000).fadeOut(900);
    }
    else {
        $(".validation-error").toggleClass("visible").delay(3000).fadeOut(900);
    }
});
});

function validateEmail(emailCheck) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(emailCheck)) {
    return true;
}
else {
    return false;
}

}

【问题讨论】：

你的问题解决了吗？

标签： jquery css validation

【解决方案1】：

了解 toggleClass 的作用toggleClass

fadeOut 后检查验证错误元素的样式

【讨论】：

【解决方案2】：

我认为这部分应该重写如下。否则，如果您犯了错误并稍后更正，您的错误消息不会总是消失。

if ($.trim(emailCheck).length == 0) {
    $(".validation-error").addClass("visible").delay(3000).fadeOut(900);
} else {
    $(".validation-error").removeClass("visible");
}

if (validateEmail(emailCheck)) {
    $(".validation-success").addClass("visible").delay(3000).fadeOut(900);
    $(".validation-error").removeClass("visible");
}
else {
    $(".validation-error").addClass("visible").delay(3000).fadeOut(900);
    $(".validation-success").removeClass("visible");
}

【讨论】：