Question

我正在尝试在使用Javascript选择的文本框数组下面显示错误消息。通过创建新的span元素并使用insertBefore（）方法来放置错误消息。 span元素是在函数中创建的，因为我不想将其硬编码到DOM中。跨栏消息确实显示，但每次我提交表单时，它们会反复添加。我只想显示跨度消息一次，每次提交表单时，它们只显示一次。以下是我的代码。

HTML

<div class="slideshow">
    <form id="form">
        <input type="text" name="1" class="textbox" />
        <input type="text" name="2" class="textbox" />
        <input type="text" name="3" class="textbox" />

        <input type="submit" name="submit" value="submit" id="submit" />
    </form>
</div>

JAVASCRIPT

<script>
    var slideshow = document.querySelector('.slideshow');
    // var span = document.createElement('span');
    var form = document.querySelector('#form');
    var inputs = form.querySelectorAll('.textbox');

    form.addEventListener('submit', function(e)
    {
        e.preventDefault();
        for( var i=0; i<inputs.length; i++ )
        {
            var span = document.createElement('span');
            (function(index)
            {
                span.innerHTML = 'error ' + index;
                inputs[index].parentNode.insertBefore(span, inputs[index].nextElementSibling);
            })(i);
        }
    }, false);
</script>

每次提交时，我都希望错误消息显示在文本框下方，而不是反复添加。它们应该只显示一次，我想在不使用jQuery或任何类型的库的情况下执行此操作。

Answer 1

我回顾你的例子来创建可用的3个span标签，而不是在代码中创建它们。如果存在一些错误，请将它们填充到跨度而不是在代码中创建/删除跨度。

＆＃13;

    var slideshow = document.querySelector('.slideshow');
    var form = document.querySelector('#form');
    var inputs = form.querySelectorAll('.textbox');

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        for (var i = 0; i < inputs.length; i++) {
            (function (index) {
                document.getElementsByTagName('span')[index]
                .innerHTML = 'error ' + index;
            })(i);
        }
    }, false);

＆＃13;

    <div class="slideshow">
        <form id="form">
            <input type="text" name="1" class="textbox" /><span></span>
            <input type="text" name="2" class="textbox" /><span></span>
            <input type="text" name="3" class="textbox" /><span></span>
            <input type="submit" name="submit" value="submit" id="submit" />
        </form>
    </div>

＆＃13;

希望得到这个帮助。

Answer 2

在插入之前先做一下检查。这是一种方法。

form.addEventListener('submit', function (e) {
    e.preventDefault();
    for (var i = 0; i < inputs.length; i++) {
        var span = document.createElement('span');
        (function (index) {
            span.innerHTML = 'error ' + index;
            if (inputs[index].nextElementSibling.tagName !== 'SPAN')
                inputs[index].parentNode.insertBefore(span, inputs[index].nextElementSibling);
        })(i);
    }
}, false);

Answer 3

你必须等待加载页面，你应该运行JavaScript。

PageLoad事件：window.onload = function（）{}

代码：

<script type="text/javascript">
    window.onload = function () {
        var slideshow = document.querySelector('.slideshow');
        var form = document.getElementById('form');
        var inputs = document.querySelectorAll('.textbox');
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            for (var i = 0; i < inputs.length; i++) {
                var span = document.createElement('span');
                (function (index) {
                    span.innerHTML = 'error ' + index;
                    inputs[index].parentNode.insertBefore(span, inputs[index].nextElementSibling);
                })(i);
            }
        }, false);
    }  
</script>

将您的代码放在window.onload事件中。

在循环中实现insertbefore（）

3 个答案: