表单字段错误的CSS

我们的表单中有一个三个下拉的“出生日期”字段，如果字段留空且用户单击“提交”，则现在会生成三条单独的错误消息

我们希望它只是其中一条错误消息，或者在提交按钮下显示其他一些显示

---

任何指导都会很棒

虽然没有提到，但我不得不想象您正在使用JavaScript来验证表单，如果是这样，请尝试以下方法，即在HTML中有一个可以通过id标记（如#error或其他）访问的span标记（或p）。在JavaScript中，只需将#error标记设置为JavaScript最后看到的错误。正如您将在下面注意到的，如果“出生日期”和“姓名”都缺失，span标记将只显示缺失的姓名错误文本。也就是说，如果需要，您可以轻松地连接字符串

伪代码（JS）

HTML

<form method="post" action="/whatever" onSubmit="return validateForm()">
    <input type="text" id="birthDate" name="birthDate" >
    <input type="text" id="name" name="name">
    <button type="submit" id="submit" class="btn">Submit</button>
</form>
<span id="error"></p>

提交

Mike，我们最终做的是屏蔽CMS的默认错误消息样式，并在其上应用我们自己的样式。现在看起来干净多了。再次感谢。

<form method="post" action="/whatever" onSubmit="return validateForm()">
    <input type="text" id="birthDate" name="birthDate" >
    <input type="text" id="name" name="name">
    <button type="submit" id="submit" class="btn">Submit</button>
</form>
<span id="error"></p>