Bootstrap force rounding of input-group element with form validation

Question

I would like to combine Bootstrap 5's input-group with form validation. However, the last input-group element is squared and not rounded when validation message is present. Is it possible to force round it?

Bonus: is it possible to provide a different validation message for first & last name in my example below?

(() => {
  'use strict'
  const forms = document.querySelectorAll('.needs-validation')
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.classList.add('was-validated')
    }, false)
  })
})()

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div class="container">
  <p/>
  <form class="row g-3 needs-validation" novalidate>
    <div class="col-md-6">
      <div class="input-group">
        <span class="input-group-text">First and last name</span>
        <input type="text" name="first" pattern="^\w{5}$" aria-label="First name" class="form-control" required>
        <input type="text" name="last" pattern="^\w{5}$" aria-label="Last name" class="form-control" required>
        <div class="invalid-feedback">
          upto 5 alphanumeric char only
        </div>
      </div>
    </div>
    <div class="col-12">
      <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
  </form>
</div>

Answer 1

You need to add the .has-validation class to the div with the .input-group class.

To fix issues with border radius, input groups require an additional .has-validation class.

(() => {
  'use strict'
  const forms = document.querySelectorAll('.needs-validation')
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.classList.add('was-validated')
    }, false)
  })
})()

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div class="container">
  <br/>
  <form class="row g-3 needs-validation" novalidate>
    <div class="col-md-6">
      <div class="input-group has-validation">
        <span class="input-group-text">First and last name</span>
        <input type="text" name="first" pattern="^\w{5}$" aria-label="First name" class="form-control" required>
        <input type="text" name="last" pattern="^\w{5}$" aria-label="Last name" class="form-control" required>
        <div class="invalid-feedback">
          upto 5 alphanumeric char only
        </div>
      </div>
    </div>
    <div class="col-12">
      <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
  </form>
</div>