Javascript css在输入字段上方显示验证消息

鉴于我有以下html位：

formp标签{
显示：块；
浮动：左；
字体大小：14px；
颜色：绿色；
}
#myField.error{
内容：“发生验证错误”；
显示：块；
}

用户名：

我对html做了一些小改动，将错误类从input移动到了p元素。在css used:：before css伪元素中（并为输入添加了一个红色边框&为错误消息添加了红色边框）

formp标签{
显示：块；
浮动：左；
字体大小：14px；
颜色：绿色；
}
#myField.error:：before{
内容：“发生验证错误”；
位置：绝对位置；
顶部：-4px；
颜色：红色；
}
#输入错误{
边框颜色：红色；
}

用户名：

您首先要做什么来确保字段有效？@Okomikeruko这部分已经使用一些javascript代码完成了。现在我面临一个输入字段，它有一个错误类。不幸的是，我不能将错误类一加起来，它是输入的一部分。是否可以在不向上移动错误的情况下执行相同的操作？这不是显示错误消息验证的方式