如何在javascript中单击下一步按钮后显示错误状态？

当我输入电子邮件地址时，它会显示错误状态

我需要显示错误状态后，点击下一步按钮，而且我添加了更多的查看朋友链接，我设置当我点击更多的查看朋友链接，它会显示一个多文本框在每个链接

现在，错误状态仅显示前5个文本框。。而且它不工作的其他文本框是通过点击链接得到的

但在我的JSFIDLE链接中，“邀请更多朋友”链接不起作用，但在网页中效果很好

javascript:

     $(document).ready(function() {
                        var container = $(document.createElement('div')).css({
            padding: '5px', margin: '0'});

            for (i = 0; i < 4; i++) {
                $(container)
                    .append('<div><input type="text" class="input" id="tb'+i+'" placeholder="Email" /></div>');
                    }    
            $('#main').before(container);   

            $("input", container).keyup(function() {
                    validateEmail($(this));
                });
        var iCnt = 4;        
                function validateEmail(el) {
            if (!isValidEmail($(el).val())) {
        $(el).parent().addClass('invalid');
        return false;
            } else {
        $(el).parent().removeClass('invalid');
        return true;
            }
        }          

    });    

    var divValue, values = '';
    function GetTextValue() {

        $(divValue).empty(); 
        $(divValue).remove(); values = '';
        $('.input').each(function() {
            divValue = $(document.createElement('div')).css({
                padding:'5px', width:'200px'
            });

            values += this.value.trim();
        }
    });

         document.all.contact_list.value = values;            
    }

---

请问，我的错误是什么，如何解决？提前感谢。

如果我理解正确，您的问题是验证仅适用于前5个输入框，而不适用于动态添加的输入框

如果是,， 您似乎只在最初绑定事件处理程序

$("input", container).keyup(function() {
    validateEmail($(this));
});

你要做的是

...
$('#btAdd').click(function() {
if (iCnt <= 19) {
    iCnt = iCnt + 1;
    // ADD TEXTBOX.
    var newTextbox = $('<input type=text class="input" id=tb' + iCnt + '  placeholder="Email" />');
    $(container).append(newTextbox);
    newTextbox.keyup(function() { //<<<< Bind keyUp for newly created textboxes also.
        validateEmail($(this));
    });
...

我希望这对你有帮助

编辑

另一方面，为了简化操作，您可以简单地使用$selector.On；方法[由@Lajos Arpad回答]

---

有关更多详细信息，请参阅“下一步验证”按钮。hust replace:

$("input", container).keyup(function() {
     validateEmail($(this));
});

作者：

要使“邀请更多朋友”链接起作用，请添加事件处理程序

$('#btAdd').click(function(){
    $(container).append('<div><input type="text" class="input" id="tb'+($('.input').length+i)+'" placeholder="Email" /> <label>This email is invalid</label></div>');
});

---

您在每一次按键事件上都会看到一个验证输入框，这就是您所犯的错误

您应该在单击“下一步事件”按钮时验证输入

在第11行使用以下代码

$("#nextbutton").click(function() {    
   var inputs=$('.input');
for(i=0;i<inputs.length;i++)
   validateEmail(inputs[i]);
});

它会正常工作的

---

维诺德的答案是正确的，但你可以用另一种方式：

$("#main").on('keyup', 'input', function() {
    validateEmail($(this));
});

发生的情况是，您正在创建尚未出现在页面上的元素，因此没有附加事件

查看更多关于

这也是不正确的：

$(container).append('<input type=text class="input" id=tb' + iCnt + '  placeholder="Email" />');

你需要有双引号

var id = 'tb' + iCnt;
$(container).append('<input type="text" class="input" id="' + id + '" placeholder="Email" />');

---

错误在于您按如下方式注册keyup：

    $("input", container).keyup(function() {
            validateEmail($(this));
        });

$(outerSelector).on('keyup', innerSelector, function(ev){
    // stuff happens
});

这种样式本身是可以的，但问题是它只影响已经存在的元素。您需要使用.on，如下所示：

    $("input", container).keyup(function() {
            validateEmail($(this));
        });

$(outerSelector).on('keyup', innerSelector, function(ev){
    // stuff happens
});

关键是outerSelector应该指向已经存在的元素，并且在注册事件时，不需要在conform to innerSelector中存在这些元素

编辑：解决特定问题

由于您的小提琴有bug，我无法真正测试它，但凭直觉，似乎您应该进行以下更改：

container.on('keyup', "input", function(ev){
    validateEmail($(this));
});

---

请尝试此代码，它可能会帮助您：

        function myfun() {
            var a = document.login.user.value;
            if (a == "" || a == null) {
                alert("u got it");
                return false;
            }
        }

---

这个邀请更多朋友的链接在哪里？实际上它看起来像asp页面。。我不太懂javascript，你能帮我吗？谢谢你，当然。。。请提供我的ASP源代码。您是否通过服务器脚本动态添加输入框？如果是，是ASP.NET还是ASP？但我们不需要ASP，对吗？。。为了满足我的需要，我认为我们的javascript和html已经足够了。不，你的答案是准确的，但是问题过于复杂了。每当您编写代码来处理一些可以由一个可靠的、经过良好测试和性能良好的工具自动完成的事情时，您就引入了潜在的bug。由于哲学上的原因，这种方法是不正确的，因此我不能投赞成票。这是准确的，因此我不能投反对票。如果你能在回答中提到这可以由.on完成，并描述你认为在引擎盖下发生了什么，那么你的回答水平就大大提高了。@VinodKumar：谢谢你的回答，但omar的回答对我有用。。感谢您没有关闭$'document.ready.just add}中的父函数标记；在js文件的末尾。“邀请更多朋友”处于编辑状态“回复”再次编辑以检查提交表单上的电子邮件，如果电子邮件无效，则停止提交表单。从按钮中删除onclick=ValidateEmail一个小错误，您没有用div括住输入框。请参阅检查行号43。经过测试，我遇到了一个简单的问题，如果我单击更多链接并在默认文本框中键入有效电子邮件，在另一个文本框中键入无效电子邮件，则会在所有文本框中显示错误。我需要显示错误状态，只有无效的电子邮件或空白字段，我可以知道如何解决这个问题，这里是更新的链接thanks@saina，这与问题完全无关。这里是问题解决的地方，但我可以请你为这个问题单独问一个问题，并在完成后在这里写一条评论吗？此外，我仍然相信，与公认的答案相比，.on的答案更优越。@saina，同样，Vinod的答案是准确的，提到了.on，并展示了如何实现它。