登录页点击Forgot Password后密码重置表单无法显示问题求助

登录页面功能正常，但点击「Forgot Password」链接后，密码重置表单无法显示，页面变为空白，无法输入员工ID提交重置请求。该表单原本功能完好，修改操作后出现此问题。

问题根源分析 #

查看代码后发现两个核心问题：

• 内联样式冲突：HTML中的forgot-password-form表单设置了内联样式style="display: none;"，而CSS逻辑是通过给body添加signup类，修改表单的left属性实现切换显示。内联样式优先级高于外部CSS，导致即使表单位置移动到可视区域，依然处于隐藏状态。
• 样式类名不匹配：错误提示容器使用了class="error"，但CSS定义的样式类是.message，会导致提示信息无法正确显示。

解决方案 #

1. 移除密码重置表单的内联隐藏样式 #

将原HTML中的密码重置表单代码：

<form id="forgot-password-form" method="post" style="display: none;">

修改为：

<form id="forgot-password-form" method="post">

2. 修正错误提示容器的类名 #

将原HTML中的错误提示容器代码：

<div id="error-container" class="error" style="<?php echo $message ? 'display: block;' : 'display: none;'; ?>">
  <?php echo $message; ?>
</div>

修改为：

<div id="error-container" class="message" style="<?php echo $message ? 'display: block;' : 'display: none;'; ?>">
  <?php echo $message; ?>
</div>

验证效果 #

修改完成后，点击「Forgot Password」链接时，JS会给body添加signup类，CSS会自动将登录表单移到可视区域外，同时将密码重置表单移到页面中央，表单正常显示，可输入员工ID提交重置请求。

内容的提问来源于stack exchange，提问作者Its.__.444