Validating three inputs that they should not be same - html

Question

I am using Boostrap to validate my registration form and I want user to provide three user name which should not be same. Now I cant prevent submitting but the boostrap form still showing that input field is correct, how can I mark it to be invalid for user to know which part they wrong?
html
<form class="needs-validation" novalidate>
<h6 class="d-inline-block pt-3">Please enter 3 choices for login username:</h6>
<div class="col-md-12 mb-3">
<label for="sys_user_first" class="form-label">
First Choice
<i class="fa-solid fa-star-of-life required-field fa-xs"></i>
</label>
<input type="text" class="form-control" id="sys_user_first" required>
<div class="invalid-feedback">
Please fill in the first choice and three choices should not be same.
</div>
<label for="sys_user_second" class="form-label">
Second Choice
<i class="fa-solid fa-star-of-life required-field fa-xs"></i>
</label>
<input type="text" class="form-control" id="sys_user_second" required>
<div class="invalid-feedback">
Please fill in the second choice and three choices should not be same.
</div>
<label for="sys_user_third" class="form-label">
Third Choice
<i class="fa-solid fa-star-of-life required-field fa-xs"></i>
</label>
<input type="text" class="form-control" id="sys_user_third" required>
<div class="invalid-feedback">
Please fill in the third choice and three choices should not be same.
</div>
</div>
</form>
JS
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false||$("#d_sys_user_first").val() === $("#sys_user_second").val() || $("#sys_user_first").val() === $("#sys_user_third").val() || $("#sys_user_second").val() === $("#sys_user_third").val()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);