javascriptjquerycssbootstrap-4bootstrap-validate

bootstrap-validate: How can i enable validation in bootstrap4?

I have a validation form in bootstrap4 when I enter less than 5 characters it shows me an error.

When I enter 5 or more than 5 characters I want to put a green check-mark and border on that particular input field.

<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>

error form validation

correct form validation

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

Solution

  • You need a few things in your code...

    UPDATE: in light of questioner's comment of multiple fields in the form

    Following code should help:

    $(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>