javascript - Jquery 电子邮件验证似乎被忽略

Question

我想做的是:

让用户输入电子邮件。如果无效；显示错误。如果它是有效的电子邮件，请让 .wizard div 向上滑动并显示消息“Cool”!

到目前为止，我的代码( fiddle here )还没有削减它。它似乎没有将 .error 类添加到输入中，也没有显示 .wizard div。我究竟做错了什么？如果有另一双眼睛，我们将不胜感激。

 $(".wizard").hide();
 $("#signup").show();

$(".continue").click(function () {
    var valid = true;
    $("#" + $(this).attr("validationDiv")).find("input").each(function () {
        if (!/^S+@S+.S+$/.test($this).val()) valid = false; // if its not a valid email
            ($this).addClass('error'); // show error
            ($this).val('Please Insert a valid Email');          
    });
    if (valid) { // if it is valid
         $(".wizard").slideUp(); // have this div show
         $("#" + $(this).attr("data-next-id")).slideDown();
     }
});

谢谢!

Answer 1

看起来有很多粗心的错误

$(".wizard").hide();
$("#signup").show();

$(".continue").click(function() {
    var valid = true;
    var that = this;
    $("#" + $(this).attr("validationDiv")).find("input").each(function() {
        var $this = $(this);
                if (!/^S+@S+.S+$/.test($(this).val()))
                    valid = false;
                ($this).addClass('error');
                ($this).val('Please Insert a valid Email');
            });
    if (valid) {
        $(".wizard").slideUp();
        $("#" + $(that).attr("data-next-id")).slideDown();
    }
});

演示:Fiddle

我发现的问题
1. validationDiv 属性指示不存在 id signup 的元素，因此将 id="signup" 添加到顶部 div(class="sighUp")
2. 内部回调中多次使用了$this，但从未定义过，通过var $this = $(this);

解决