Untitled

<!DOCTYPE html>
<html>

  <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
  </head>

  <body>
    <form class="needs-validation" novalidate>
        <div class="form-row">
          <div class="col-md-4 mb-3">
            <label for="validationCustom01">Primeiro nome</label>
            <input type="text" class="form-control" id="validationCustom01" placeholder="Nome" value="Mark" required>
            <div class="valid-feedback">
              Tudo certo!
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationCustom02">Sobrenome</label>
            <input type="text" class="form-control" id="validationCustom02" placeholder="Sobrenome" value="Otto" required>
            <div class="valid-feedback">
              Tudo certo!
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="validationCustomUsername">Usuário</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
              </div>
              <input type="text" class="form-control" id="validationCustomUsername" placeholder="Usuário" aria-describedby="inputGroupPrepend" required>
              <div class="invalid-feedback">
                Por favor, escolha um nome de usuário.
              </div>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="col-md-6 mb-3">
            <label for="validationCustom03">Cidade</label>
            <input type="text" class="form-control" id="validationCustom03" placeholder="Cidade" required>
            <div class="invalid-feedback">
              Por favor, informe uma cidade válida.
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="validationCustom04">Estado</label>
            <input type="text" class="form-control" id="validationCustom04" placeholder="Estado" required>
            <div class="invalid-feedback">
              Por favor, informe um estado válido.
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="validationCustom05">CEP</label>
            <input type="text" class="form-control" id="validationCustom05" placeholder="CEP" required>
            <div class="invalid-feedback">
              Por favor, informe um CEP válido.
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
            <label class="form-check-label" for="invalidCheck">
              Concordo com os termos e condições
            </label>
            <div class="invalid-feedback">
              Você deve concordar, antes de continuar.
            </div>
          </div>
        </div>
        <button class="btn btn-primary" type="submit">Enviar</button>
      </form>

      <script>
      // Exemplo de JavaScript inicial para desativar envios de formulário, se houver campos inválidos.
      (function() {
        'use strict';
        window.addEventListener('load', function() {
          // Pega todos os formulários que nós queremos aplicar estilos de validação Bootstrap personalizados.
          var forms = document.getElementsByClassName('needs-validation');
          // Faz um loop neles e evita o envio
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
      </script>
  </body>

</html>