如何检测HTML元素内容为空？实现PHP表单无错误时隐藏提示span

你遇到的问题由两处显性错误+逻辑优化空间组成，按优先级给出两种可落地的实现方式：

问题根因 #

• JS代码拼写错误：else分支中ocument缺失首字母d，直接导致JS执行报错失效
• 表单提交地址配置错误：action属性中的$_SERVER['PHP_SELF']没有加echo，提交后地址为空
• 冗余判断逻辑：错误提示由PHP服务端生成，完全不需要依赖JS控制显隐，用PHP直接判断渲染性能更高、逻辑更统一

方案1（推荐：纯PHP实现，无需JS） #

直接在渲染页面时通过PHP判断$nameerr是否为空，为空就不输出错误提示标签，从根源上避免空标签占位问题：

<!-- 替换原有的span错误标签代码 -->
<label for="name" class="form-label">Name:</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your name" style="width:100%;">
<?php if (!empty($nameerr)): ?>
<span class="badge bg-danger float-end" id="error1">
    <?php echo $nameerr; ?>
</span>
<?php endif; ?>

同时修复表单action的拼写问题：

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

原页面的JS代码可以完全删除，不需要额外前端逻辑。

方案2（保留JS的修复方案） #

如果你坚持要通过JS控制显隐，修改两处即可生效：

1. 把span标签写紧凑，避免多余换行空格导致innerHTML判断为空失效：

<span class="badge bg-danger float-end" id="error1"><?php echo $nameerr; ?></span>

2. 修复JS代码的拼写错误，同时加trim处理空白字符：

var content = document.getElementById('error1').innerHTML.trim();
if(content === ""){
    document.getElementById('error1').style.display = "none";
}else{
    document.getElementById('error1').style.display = "block";
}

同样不要忘记修复表单action的echo缺失问题。

内容的提问来源于stack exchange，提问作者user15141652