html - 如何显示html div，以便在表单提交后自动显示错误消息

Question

我有一个表单可以验证用户名和密码是否正确，但它不会显示错误消息，除非我再次单击该表单。该表单位于 html div 标记内，我想知道如何设置样式带有CSS的div，以便在表单提交后可以自动显示错误消息。这是我的代码

<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password  </span></div>
<form action="/" charset="UTF-8" method="post">
            <div class="error-message alert-danger">
        <span>Sorry, unrecognized username or password.<a href="#">Have you forgotten your password?</a></span>
    </div>

输入错误后不会自动显示错误信息，如果您能告诉我如何使用 css 设置 div 的样式以使其在输入错误后可见，我将不胜感激

Answer 1

如果你想在没有js的情况下做到这一点，你可以使用

:valid 
:invalid 

CSS 伪类并相应地设置输入边框的样式。

您还可以将模式附加到验证中。

检查:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation