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

Question

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

<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“测试”始终处于隐藏状态。我的脚本有什么问题？

Answer 1

您有两个错误，首先您没有为您在脚本中使用的 textarea 分配任何 ID。其次，每次用户进行任何更改时都必须调用该函数，因此您需要绑定(bind) 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>