#validate和bootstrap 错误提示信息位置无法改变
我想让validate提示信息转移到input后 但是修改后会导致input框变短 有什么方法可以让原模型不变的情况下使错误信息位置在input框后？
效果显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
<script src="../lib/jquery-3.6.0.min.js"></script>
<script src="../lib/jquery-validation-1.19.5/dist/jquery.validate.js"></script>
<style>
a {
text-decoration: none !important;
}
header {
width: 100%;
height: 50px;
border-bottom: 1px rgb(207, 207, 207) solid;
position: relative;
}
.nav {
width: 200px;
height: 35px;
padding-top: 15px;
padding-left: 20px;
}
nav a {
text-decoration: none;
color: #777777;
font-size: 20px;
height: 100%;
}
.login {
height: 400px;
background-color: white;
margin-top: 100px;
}
.errorInfo{
color:red;
}
input.error { border: 1px solid red; }
</style>
</head>
<body>
<header>
<nav class="nav">
<a href="./index.html">KD Admin v1.0</a>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-push-3 login">
<form class="form-horizontal">
<div class="form-group ">
<label for="inputEmail3" class="col-sm-2 control-label">账号</label>
<div class="col-sm-10 errorInfo">
<input type="text" class="form-control" id="inputEmail3" placeholder="请输入邮箱/手机号" name="user">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10 errorInfo">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码" name="pass">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="btn">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</main>
</body>
<script>
$(function(){
$(".form-horizontal").validate({
rules:{
user:{
required:true,
minlength:5,
maxlength:20
},
pass:{
required:true,
minlength:6
}
},
messages:{
user:{
required:"账号不能为空！",
minlength:"账号长度最低为5",
maxlength:"账号长度最高为20"
},
pass:{
required:"密码不能为空！",
minlength:"密码长度最低为6"
}
}
});
});
</script>
</html>
