Is there a way to make the last input-group element rounded when a validation message is present while combining Bootstrap 5's input-group with form validation?
Additionally, can different validation messages be provided for first & last name in the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289948997">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087d667b6678">[email protected]</a>/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>