<!-- BEGIN COPY / PASTE -->
        <form id="myForm" class="needs-validation" novalidate>
            <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control" id="email" required>
                <div class="invalid-feedback">
                    Please enter a valid email.
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <script>
            // Client-side validation
            (function () {
                'use strict';
                var forms = document.querySelectorAll('.needs-validation');
                Array.prototype.slice.call(forms).forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            })();

            // Example server-side validation
            document.getElementById('myForm').addEventListener('submit', function (event) {
                event.preventDefault(); // Remove this line in production
                var emailInput = document.getElementById('email');
                var serverError = false; // Simulate server-side error

                if (serverError) {
                    emailInput.classList.add('is-invalid');
                    emailInput.nextElementSibling.textContent = 'Server-side error: Email already exists.';
                }
            });
        </script>
        <!-- END COPY / PASTE -->