雀蛙 2022-09-09 10:19 采纳率: 0%
浏览 16

validate和bootstrap 错误提示信息位置无法改变,如何解决?

#validate和bootstrap 错误提示信息位置无法改变
我想让validate提示信息转移到input后 但是修改后会导致input框变短 有什么方法可以让原模型不变的情况下使错误信息位置在input框后?
效果显示

img

<!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>
  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 创建了问题 9月9日

      悬赏问题

      • ¥15 Mac系统word显示此文档已被删除或当前无法访问.
      • ¥15 Unity用代码实现Tilemap
      • ¥15 怎么求广播地址以及网络地址?
      • ¥15 想知道unity如何实现物体贴地运动
      • ¥15 从A地到B地有多条路径可以到达,现要从A地到B地运物资问题
      • ¥30 用java设计小游戏扑克牌比大小,52张牌的图片选世界篮球明星图或其它都行
      • ¥15 ATM管理员功能代码及解释
      • ¥15 EasyExcel导出下载文件响应流为空
      • ¥15 Python爬虫添加详细注释
      • ¥15 python的为什么wordcloud词云就是下载不了