javascript - bootstrap-validate:如何在 bootstrap4 中启用验证？

Question

当我输入少于 5 个字符时，我在 bootstrap4 中有一个验证表单，它显示错误。

当我输入 5 个或超过 5 个字符时，我想在该特定输入字段上放置一个绿色复选标记和边框。

<div class="container">
    <form action="" class="needs-validation" novalidate>
         <div class="form-group">
              <label for="username">username:</label>
              <input type="text" class="form-control" id="name"    placeholder="username" required> 
         </div>
        <input type="submit" class="btn btn-primary" value="submit" >
     </form>
    </div>


<script src="./dist/bootstrap-validate.js"></script>
 <script>
   bootstrapValidate('#name', 'min:5:Enter at least 5 charecters');
 </script>

</body>
 </html>

https://github.com/NinoosMoshi/form-validation.git

Answer 1

您的代码中需要一些东西...

• 您的条件正确，需要根据 bootstrapValidate
添加/删除类
• 导入图标库(我用的是font awesome v5)
• 在你添加/删除的类中，你必须放置复选标记的图标

更新:根据提问者对表单多个字段的评论

以下代码应该有所帮助:

$(document).ready(function() {
  bootstrapValidate('#usr', 'min:5:Enter at least 5 characters!', function(isValid) {
    if (isValid) {
      $("#formHolder").addClass('validClass');
      $("#formHolder").removeClass('invalidClass');
    } else {
      $("#formHolder").addClass('invalidClass');
      $("#formHolder").removeClass('validClass');
    }
  });
  bootstrapValidate('#lastName', 'min:7:Enter at least 7 characters!', function(isValid) {
    if (isValid) {
      $("#formHolder2").addClass('validClass');
      $("#formHolder2").removeClass('invalidClass');
    } else {
      $("#formHolder2").addClass('invalidClass');
      $("#formHolder2").removeClass('validClass');
    }
  });
});

.validClass>input {
  border: 2px solid green;
}

.validClass .form-control:focus {
  border-color: green;
  box-shadow: 0 0 0 0.2rem rgba(33, 93, 30, 0.56)
}

.invalidClass>input,
.invalidClass .form-control:focus {
  border: 2px solid red;
}

.inputWrapper {
  display: inline-block;
  position: relative
}

.validClass:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  visibility: visible;
  font-weight: 900;
  color: green;
  position: absolute;
  right: 6px;
  top: 55%;
}

.invalid-feedback {
  position: absolute;
  display: inline-block;
  bottom: -100px;
  left: 0px;
}

.submitBtn {
  margin-top: 20px;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

<div class="container mt-3">
  <form>
    <div class="form-group">
      <div class='inputWrapper invalidClass' id='formHolder'>
        <label for="usr">Name:</label>
        <input type="text" class="form-control " id="usr">
      </div>
      <br/>
      <div class='inputWrapper invalidClass' id='formHolder2'>
        <label for="lastName">last Name:</label>
        <input type="text" class="form-control " id="lastName">
      </div>
    </div>
    <button type="submit" class="btn btn-primary submitBtn">Submit</button>
  </form>
</div>