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

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条回答 默认 最新

  • 安心一点 2022-09-09 10:35
    关注

    你先把引入的js文件路径换成资源地址,不然我们还得去找

    评论

    报告相同问题?

    问题事件

    • 创建了问题 9月9日

    悬赏问题

    • ¥15 请教一下simulink中S函数相关问题
    • ¥15 Hadoop中eclipse运行问题
    • ¥15 在二层网络中,掩码存在包含关系即可通信
    • ¥15 端口转发器解析失败不知道电脑设置了啥
    • ¥15 Latex算法流程图行号自定义
    • ¥15 关于#python#的问题:我在自己的电脑上运行起来总是报错,希望能给我一个详细的教程,(开发工具-github)
    • ¥40 基于51单片机实现球赛计分器功能
    • ¥15 cs2游戏画面卡住,应用程序sid与指挥者sid不匹配
    • ¥15 实验七:Pandas要有实验截图和代码
    • ¥15 TypeError: Make sure that the iterable only contains strings.