Login form validation with jsf with javascript , create alert

I am trying to duplicate a program with primefaces and I need to show alert windows when validating the username and password fields of my login form.
Next I show you how the first program looks like

In my duplicated program that I don’t use primefaces I don’t know how to show the same alert result with bootstrap and javascript.
Next I show you the form of my duplicated program:

Currently I am not validating fields as I need to first show the alert as many times as I want by pressing the button, here the xhtml code:

<div class="col-6 position-absolute">
    <div id="alertMessage"
        class="alert alert-warning alert-dismissible fade show hidden"
        role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those
        fields below.
        <button type="button" class="btn-close" data-bs-dismiss="alert"
            aria-label="Close"></button>
    </div>
</div>

<div class="bg-white p-4 rounded-5"
    style="box-shadow: 2px 2px 5px black;">
    <div class="justify-content-center">
        <img src="recursos/images/logo_empresarial.png" class="mb-1"></img>
    </div>
    <h:form id="formLogin">

        <div class="text-center mt-2">
            <h:outputLabel for="username" value="Usuario:"></h:outputLabel>
            <h:inputText id="username" value="#{obeanlogin.usuario}"
            required="true" requiredMessage="Ingrese un usuario"
                class="form-control" />
        </div>

        <div class="text-center mt-2">
            <h:outputLabel for="password" value="Password:"></h:outputLabel>
            <h:inputText id="password" value="#{obeanlogin.contrasena}"
                class="form-control" />
        </div>

        <div class="text-center mt-4">
            <h:commandButton id="submitLogin" class="btn btn-primary"
            onclick="return sendForm();"
                value="Aceptar" action="#{obeanlogin.validaUsuarioContrasena()}" />

        </div>


    </h:form>

</div>

And my javascript code:

var form = document.getElementById('formLogin');
var username = document.getElementById('formLogin:username');
var password = document.getElementById('formLogin:password').value;
var alerta = document.getElementById('alertMessage');
var closeButton = document.querySelector('.alert .btn-close');

function sendForm() {
 alerta.classList.remove('hidden');
 console.log('se abrió ventana');
 console.log(alerta);
 return false;
}

/*closeButton.addEventListener('click', function() {
console.log(alerta);
alerta.classList.add('hidden'); // Oculta el alerta al añadir la clase 'hidden'
});*/


alerta.addEventListener('close.bs.alert', event => {
 alerta.classList.add('hidden');
 console.log('close close');
 console.log(alerta);
})

Quiero saber como puedo lograr la misma ventana de mi primer programa con los campos vacíos, además de validar el usuario y contraseña incorrectos con la función de mi bean