Certain form verification

This code uses bootstrap4.

by ksiger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Simple form</title>
  </head>

  <body>
    <form id="myForm" method="POST" novalidate>
      <div class="form-group">
        <label for="phoneInput">Phone<sup class="sup_star">not required</sup></label>
        <input type="text" class="form-control" placeholder="" name="phone" value="">
      </div>
      <div class="form-group">
        <label for="emailInput">Email<sup class="sup_star">required</sup></label>
        <input type="email" class="form-control required" placeholder="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" name="email" value="">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </body>
</html>

JavaScript

$(document).ready(function() {
  /* single item validation */
  checkThis = function(t) {
    var isValid = true;
    $(t).removeClass("is-valid").removeClass("is-invalid");
    if ($(t).val() != "" && $(t).prop("validity").valid) {
      $(t).addClass("is-valid");
    } else {
      $(t).addClass("is-invalid");
      isValid = false;
    }
    return isValid;
  }
  /* form validation */
  checkForm = function(f) {
    var isValid = true;
    $(f).find(".required").each(function() {
      isValid = isValid && checkThis(this);
    });
    return isValid;
  }
  /* bind onChange event to required items */
  $("#myForm").find(".required").on('change', function() {
    return checkThis(this);
  });
  /* submit processing */
  $("#myForm").submit(function(e) {
    e.preventDefault();
    var form = $(this);
    if (!checkForm(form)) {
      return false;
    }
    /* here goes code processing valid form. For example ajax request to your server */
  });
});