Formulario con validación en Bootstrap 5

contacto.html

<main class="container-xl py-5">
        <h2 class="text-center py-5">Contacto</h2>

        <div class="row justify-content-center">
            <form class="col-md-8 needs-validation" novalidate>
                <fieldset> <!-- Agrupar datos en un formulario -->
                    <legend class="bg-primary text-center text-white fs-2">Tus Datos</legend>

                    <div class="mb-3">
                        <label class="form-label" for="nombre">Nombre</label>
                        <input type="text" class="form-control" id="nombre" placeholder="Tu Nombre" required>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                        <!-- <span class="valid-feedback text-uppercase fw-bold">¡Muy Bien!</span> -->
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="asunto">Asunto</label>
                        <input type="text" class="form-control" id="asunto" placeholder="Tu Asunto" required>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="email">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Tu Email" required>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="tel">Teléfono</label>
                        <input type="tel" class="form-control" id="tel" placeholder="Tu Teléfono" required>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="mensaje">Mensaje</label>
                        <textarea class="form-control" rows="10" id="mensaje" required></textarea>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                    </div>
                </fieldset>

                <fieldset>
                    <legend class="bg-primary text-center text-white fs-2">País</legend>

                    <div class="mb-3">
                        <label class="form-label" for="pais">País</label>
                        <select class="form-control" id="pais" required>
                            <option value="">--Seleccione--</option>
                            <option value="UY">Uruguay</option>
                            <option value="AR">Argentina</option>
                            <option value="CO">Colombia</option>
                            <option value="CR">Costa Rica</option>
                            <option value="ES">España</option>
                            <option value="US">Estados Unidos</option>
                            <option value="MX">México</option>
                            <option value="PE">Perú</option>
                        </select>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                    </div>
                </fieldset>

                <fieldset>
                    <legend class="bg-primary text-center text-white fs-2">Información Extra</legend>
                    <div class="mb-3">
                        <label class="form-label" for="cliente">Cliente:</label>
                        <input name="tipo" type="radio" class="form-check-input" id="cliente" required>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="proveedor">Proveedor:</label>
                        <input name="tipo" type="radio" class="form-check-input" id="proveedor" required>
                        <span class="invalid-feedback text-uppercase fw-bold">Campo Obligatorio</span>
                    </div>
                </fieldset>

                <div class="d-grid d-md-flex"> <!-- Display Grid al tener solo 1 hijo toma todo el ancho disponible -->
                    <input class="btn btn-secondary fs-2 px-5 mt-5" type="submit" value="Enviar Formulario">
                </div>
            </form>
        </div>
    </main>