Javascript 使用jquery向输入字段添加css

我正在创建一个带有错误消息的表单，当我提交一个没有值的表单时，它应该添加图标并更改框的颜色。但是我无法将错误消息发送到姓氏字段，我正在尝试使用css在输入字段中添加图标，无法将其移动到文本字段中。

有人帮我吗

$（函数（）{
$（'[data toggle=“popover”]'）。popover（）
$（“.fa”）.hide（）；
});
函数验证（）{
var errorFlag=true；
var firstName=$（'#fname'）.val（）；
变量姓氏=$（'#sname'）.val（）；
var mobileNumber=$（'#mobNum'）.val（）；
var reEnterMobileNumber=$（'#reEnterMobNum'）.val（）；
//var emailid=$（'#mail'）.val（）；
var password=$（'#password'）.val（）；
var firstNameReg=/^（[a-zA-Z]{2,30}）$/；
var LANSMEREG=/^（[a-zA-Z]{2,30}）$/；
var numericReg=/^\d{3}\d{3}\d{4}$/；
//var emailReg=/^（[\w-\.]+@（[\w-]+）+（\[\w-]{2,4}）美元/；
var passReg=/^（[a-zA-Z0-9]{2,30}）$/；
变量输入数据=[{
id:“fname”，
regex:firstNameReg
}, {
输入数据：“sname”，
regex:namesreg
}, {
id:“mobNum”，
正则表达式：numericReg
}, {
id:“密码”，
正则表达式：passReg
}];
对于（变量索引=0；索引

.nameField{
宽度：197px！重要；
}
.菲尔德{
高度：38px；
边界半径：5px；
边框颜色：#bdc7d8；
宽度：398px；
}
输入：：-webkit输入占位符{
线高：3；
字号：18px；
填充：8px 10px；
}
.输入，
#创建帐户{
利润上限：10px！重要；
}
输入{
边框：1px实心；
宽度：152px；
利润率最高：-1%！重要；
高度：23px；
}
errspan先生{
颜色：#C6484C；
字体大小：1.6em！重要；
显示：绝对；
右：9px！重要；
顶部：9px！重要；
}
#创建帐户{
字号：19px；
线高：126%；
字体系列：“货运无粗体”，Helvetica，Arial，无衬线！重要；
填充：7px 20px；
文本对齐：居中；
边框：1px实心#2c5115；
边界半径：5px；
颜色：#fff；
光标：指针；
边缘底部：10px；
背景色：#69a74e；
边缘底部：15px！重要；
}
boxBorder先生{
边框颜色：红色；
}

创建帐户
‌有一些语法错误，只需使用以下代码更新您的
js
在验证函数中，您将
inputData:“sname”
而不是
id:“sname”

要设置您的
图标位置
，只需将您的
图标css
替换为以下css：

.errspan {
    color: #C6484C;
    font-size: 1.6em !important;
    position: absolute;
    right: 9px !important;
    /* top: 9px !important; */
    margin-top: 12px;
}  

.errspan {
    color: #C6484C;
    font-size: 1.6em !important;
    position: absolute;
    right: 9px !important;
    /* top: 9px !important; */
    margin-top: 12px;
}