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

首先，你应该真的在学习jQuery和javascript之前......

$this应为$(this)。你混淆了classed/id，而且你没有使用正确的元素名称。难怪它不起作用。以下是更正后的示例：http://jsfiddle.net/HvjtB/28/

现在您只需要创建正确的电子邮件检测Regexp：http://www.regexper.com/

Answer 2

看起来很多粗心的错误

$(".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. signup属性未指明标识为validationDiv的元素，因此将id="signup"添加到顶部div（class="sighUp"）
2.在内部回调中，您多次使用$this，但它从未被定义，通过var $this = $(this);解决它

Answer 3

当你真的应该向下滑动时，你正在向上滑动。

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

3 个答案: