title: Bootstrap 4 and jQuery Validation Plugin
body: <p>I am working on a project and i need to add simple way to validate client side form then I moved to jQuery validation plugin. I play around some basic stuff, but I struggle when it make as this </p>
  
  <p><a href="https://i.stack.imgur.com/8ptBI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8ptBI.png" alt="enter image description here"></a></p>
  
  <p>So far I have done that much</p>
  
  <p><a href="https://i.stack.imgur.com/0WXtj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0WXtj.png" alt="enter image description here"></a></p>
  
  <p>My html code </p>
  
  <pre><code>        &lt;body&gt;
          &lt;form id="default-register-user" method="POST" action="index.php"&gt;
              &lt;div class="form-row"&gt;
                  &lt;div class="col-md-4 mb-3"&gt;
                      &lt;label for="validationServer01"&gt;First name&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="validationServer01" placeholder="First name" 
                      required name="fname"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 mb-3"&gt;
                      &lt;label for="validationServer02"&gt;Email&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="validationServer02" placeholder="Last name" required name="lname" minlength="4"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 mb-3"&gt;
                      &lt;label for="validationServerUsername"&gt;Username&lt;/label&gt;
                      &lt;div class="input-group"&gt;
                          &lt;div class="input-group-prepend"&gt;
                              &lt;span class="input-group-text" id="inputGroupPrepend3"&gt;@&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;input type="text" class="form-control" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3"
                              required name="username"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;button class="btn btn-primary" type="submit"&gt;Submit form&lt;/button&gt;
  
              &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                  crossorigin="anonymous"&gt;&lt;/script&gt;
              &lt;script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"&gt;&lt;/script&gt;
              &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
                  crossorigin="anonymous"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
                  $(document).ready(function () {
                      $("#default-register-user").validate({
                          rules: {
                              lfname: {
                                  required: true,
                                  minlength: 5,
                                  maxlength: 20
                              },
                              lname: {
                                  required: true,
                                  minlength: 5,
                                  maxlength: 20
                              },
                              username: {
                                  required: true,
                                  minlength: 6,
                                  maxlength: 25
                              }
                          }
                      });
                  });
              &lt;/script&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>I need to add </p>
  
  <ul>
  <li>Little message down the input field it is valid or invalid input</li>
  <li>Need to put green or red border around input field when it is valid or invalid</li>
  </ul>
  
  <p>How can I improve this, and would someone explain how it works? I just searched the web and I found how to it with Bootstrap 3, but some class are change and need extra jQuery for it.</p>
  
  <p>Thank you.!</p>