Bootstrap contact form template with validation

Code

        <form id="contact_form" name="contact_form" method="post" novalidate action="#">
    <div class="mb-5">
        <label for="name_input" class="form-label">Name</label>
        <input type="text" required minlength="2" maxlength="50" class="form-control" id="name_input" name="name" placeholder="Name">
        <div class="invalid-feedback">Please provide your name</div>
    </div>  
    <div class="mb-5">
        <label for="email_addr" class="form-label">Email address</label>
        <input type="email" required minlength="2" maxlength="50" class="form-control" id="email_addr" name="email"
            placeholder="name@example.com">
        <div class="invalid-feedback">Please enter your email address</div>
    </div>
    <div class="mb-5">
        <label for="phone_input" class="form-label">Phone</label>
        <input type="tel" required maxlength="50" class="form-control" id="phone_input" name="Phone"
            placeholder="Phone">
        <div class="invalid-feedback">Please Provide your phone number</div>
    </div>
    <div class="mb-5">
        <label for="message" class="form-label">Message</label>
        <textarea maxlength="2500" required class="form-control" id="message" name="message" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-primary px-4">Submit</button>
</form>
<script>
(() => {
  'use strict'

  const form = document.getElementById('contact_form');
  
  form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
})()
</script>