Como fazer um simples validação com Javascript e Bootstrap 5

Veja como fazer um simples validação com Javascript e Bootstrap 5.

Lembre-se de que uma validação do lado do servidor é sempre recomendada. Validações do lado do cliente servem para melhorar a experiência do usuário, impede que um fomrulário inválido seja enviado sem necessidade.

Créditos https://www.youtube.com/@maroquio

Código testado.

<div class="row">
 <div class="col-12">
 <div id="error_log_formulario_x" class="alert alert-danger d-none"></div>
 <form id="formulario_x" action="salvar.php" method="post" class="">

 <label for="titulo">Título</label>
 <input validate oninput="valida(this);" id="titulo" value="" type="text" name="titulo" class="form-control form-control-sm" placeholder="Informe o título do produto">

 <label for="descricao">Descrição</label>
 <textarea validate oninput="valida(this);" id="descricao" name="descricao" placeholder="Informe descrição" rows="3" tabindex="2" class="form-control"></textarea>

 <label for="selecionar">Opções*</label>
 <select class="form-control" validate onchange="valida(this)" name="selecionar" id="selecionar">
 <option value=""> (Selecione um item) </option>
 <option value="2"> 002 </option>
 <option value="3"> 003 </option>
 </select>

 <a onclick="validaSubmit('formulario_x');" class="btn btn-info mt-2 ">Salvar</a>

 </form>

 </div>
 </div>
</div>
<script>

 function validaSubmit(formEl = null) {

 const form = document.getElementById(formEl);
 const erroElement = document.querySelector('#error_log_formulario_x');
 let erros = 0;

 Array.from(form).forEach(function(el, index) {

 if (el.hasAttribute('validate') && el.value == "") {
 erros++;
 addRemoveClass(el, 'is-invalid', 'is-valid');
 } else {
 addRemoveClass(el, 'is-valid', 'is-invalid');
 }

 });

 if (erros == 0 && form) {
 form.submit();
 }

 console.log(erros, (erros == 0 && status == 1), form);

 }

 function addRemoveClass(el, add, remove) {
 el.classList.remove(remove);
 el.classList.add(add);
 }

 function valida(el) {
 console.log(el);
 if (el.hasAttribute('validate') && el.value == "") {
 el.classList.remove('is-valid');
 el.classList.add('is-invalid');
 } else {
 el.classList.add('is-valid');
 el.classList.remove('is-invalid');
 }
 
 }
</script>