表单验证成功时显示隐藏的元素

Question

我试图显示一个div如果HTML表单的所有字段都至少填充了一个字符。

<input name="name" id="name" value="" required placeholder="Name"></input>
<input name="surname" id="surname" value="" required placeholder="Surname"></input>
<input name="email" id="email" value="" required placeholder="Email"></input>
<textarea name="comments" value="" required placeholder="Comments"></textarea>
<div id="test" style="display:none;">test</div>

我有这个剧本

<script type="text/javascript">
    if(document.getElementById('name').value!='' && 
       document.getElementById('surname').value!='' && 
       document.getElementById('email').value!='' && 
       document.getElementById('message').value!=''){
           document.getElementById('test').style.display = 'block';
    }
</script>

但这不起作用。 为什么？ 我试图将脚本从文件的顶部移至底部，但div'test'始终处于隐藏状态。 我的抄本怎么了？

Answer 1

您需要在每次更改字段时调用该脚本。

例如：

<input name="name" id="name" value="" required placeholder="Name" onchange="myFunction()"></input>
etc.

<script type="text/javascript">
    function myFunction() {
        if(document.getElementById('name').value!='' &&
           document.getElementById('surname').value!='' &&
           document.getElementById('email').value!='' &&
           document.getElementById('message').value!=''){
               document.getElementById('test').style.display = 'block';
        }
    }
</script>

Answer 2

我看到你链接了jQuery。 为什么不使用它呢？

$('input').on('change', function(){
    if($('#name').val() != '' && $('#surname').val() != '' && $('#email').val() != '' && $('#comments').val() != ''){
        $('#test').show();
    }else{
        //This part is optional
        $('#test').hide();
    }
});

您还应该在文本区域中添加id="comments"

Answer 3

您有两个错误，首先您没有为脚本中使用的textarea分配任何ID。 其次，每次用户进行任何更改时都必须调用该函数，因此您需要绑定onchange事件。

因此，应为：

HTML：

<input name="name" id="name" value="" required placeholder="Name" onchange="myUpdateFunction()"></input>
<input name="surname" id="surname" value="" required placeholder="Surname" onchange="myUpdateFunction()"></input>
<input name="email" id="email" value="" required placeholder="Email" onchange="myUpdateFunction()"></input>
<textarea name="comments" id="message" value="" required placeholder="Comments" onchange="myUpdateFunction()"></textarea>
<div id="test" style="display:none;">test</div>

JavaScript：

<script type="text/javascript">
function myUpdateFunction() {
    if(document.getElementById('name').value!='' &&
       document.getElementById('surname').value!='' &&
       document.getElementById('email').value!='' &&
       document.getElementById('message').value!='') {
           document.getElementById('test').style.display = 'block';
    }
}
</script>

Answer 4

第一个问题是脚本何时运行。 按照编码，它将在页面呈现脚本后立即运行，并且不再运行。

您可能希望将其连接到每个文本框的on change事件，以便您知道何时显示隐藏字段。

第二，“消息”元素在哪里？ 那应该是评论吗？ 如果是这样，则注释缺少一个ID（具有名称但没有ID）

Answer 5

http://jsfiddle.net/7hafkwhj/1/

首先，将元素包装在html标签形式中可能是一个好主意：

<form id="form">
    <input name="name" type="text" placeholder="Name" required></input>
    <input name="surname" type="text" placeholder="Surname" required></input>
    <input name="email" type="email" placeholder="Email" required></input>
    <textarea name="comment" placeholder="Comments" required></textarea>
</form>
<div id="message">Ok, roger</div>

另外，我不明白为什么您应该使用jQuery来处理此类问题。 您可以使用本机Javascript做同样的事情：

(function() {
    var form = document.getElementById('form'),
    message = document.getElementById('message');

    function makeCheck() 
    {
        i = 0;
        while(i < form.elements.length) {
            if(form.elements[i].value === '')
            {
                return false;
            }
            i++;
        }
        return true;
    }

    function displayMessage() 
    {
        if(makeCheck()) 
        {
            message.style.display = 'block';
        }
        else 
        {
            message.style.display = 'hide';
        }
    }

    for(i = 0; i < form.elements.length; i++)
    {
        form.elements[i].onkeyup = function () {
            displayMessage();
        };
    }
})();