Validate Single Input

Using a toggle button to populate an inputs field, and validate at the same time.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<form id="myform">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <div class="form-group">
        <label for="name" class="control-label">Email address</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JavaScript

$(function() {
  $("#myform").validate({
    rules: {
      name: {
        required: true,
        minlength: 2
      }
    },
    highlight: function(element) {
    	$(element).removeClass('is-valid').addClass('is-invalid');
      $(element).closest('.form-group').removeClass('success').addClass('error');
    },
    unhighlight: function(element) {
      $(element).removeClass('is-invalid').addClass('is-valid');
      $(element).closest('.form-group').removeClass('error').addClass('success');
    },
  });
})