html 表单中错误消息/提示的正确位置

Question

我有一个简单的标准表格，并打算使用 javascript 的

document.getElementById("idname").innerHTML = "hint/error message";

在表单上更改/显示我的错误消息。

将错误消息放在表单上的正确位置是什么？

内部标签？标签旁边？

我是把它放在一个 div 中还是一个 span 中？

（我希望错误消息显示在输入字段的右侧。）

下面是我的表格：

<form id="registerForm" method="POST" action="register_post.php">

  <p class="form-registerUserName">
    <label for="registerUserName">User Name</label>
    <span class="required">*</span>
    <input
        id="registerUserName"
        name="registerUserName"
        type="text"
        size="24"
        maxlength="24"
        value="<?php echo $_SESSION['registerUserName'];?>"
        onkeyup="validateName()"
        onblur="validateName()"
     >
   </p>
</form>

提前致谢。

Answer 1

您可以在 Div 上显示错误消息以进行验证，以便您可以使用 javascript 轻松管理 div 显示/隐藏。

例如。

<div class="error" style="display: none; float:left; width:100%;" id="nameError">Please Enter User Name *</div>
<div><input type="text" id="username" name='username' class="textcss validate" style="width:95%"  placeholder="Your name can not be blank" ></div>

现在检查是否提交它的填充并显示和隐藏错误 div 以便你的 css 以正确的形式

Answer 2

通常最好使用 div 作为包装器并将错误消息放在标签中，然后将其放在输入框旁边。

说： 用户名 * " onkeyup="validateName()" onblur="validateName()" >

CSS

input{
    display: inline-block;
}
label.error_msg{
    display: none;
    color: red;
}