How to make a forced pattern using Javascript

document.addEventListener("DOMContentLoaded", function () {
            const displaynameInput = document.getElementById('display_name');

            function sanitizeDisplayNameInput() {
                let value = displaynameInput.value;

                const minLength = 2; // Minimum length for display name
                const maxLength = 50; // Maximum length for display name

                if (!/^[a-zA-Z]/.test(value)) {
                    value = value.replace(/^[^a-zA-Z]+/, ''); // Remove all non-alphabet characters at the start
                }

                if (value.replace(/s/g, '').length > maxLength) {
                    value = value.substring(0, value.length - 1);
                    displaynameInput.value = value;
                    return;
                }

                value = value.replace(/^s+/g, '');    // Remove leading spaces only

                value = value.replace(/s{2,}/g, ' '); // Replace multiple spaces with a single space

                // Ensure the value is between min and max length
                if (value.replace(/s/g, '').length < minLength || value.replace(/s/g, '').length > maxLength) {
                    document.getElementById("display_name-check-btn").style.display = "none";
                } else {
                    document.getElementById("display_name-check-btn").style.display = "block";
                }

                // Remove any words with non-English characters
                value = value.replace(/[^x00-x7F]/g, '');

                // Split the value into words
                let parts = value.split(' ');

                // Process each part
                value = parts
                    .map((word, index) => {
                        if (word.length === 0) return ''; // Skip empty words

                        // Convert the whole word to lowercase and then capitalize the first letter
                        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();

                        // Allow any other characters or numbers at the start of words
                        return word;
                    })
                    .join(' '); // Rejoin the parts into a single string

                // Update the display name input with the sanitized value
                displaynameInput.value = value;
            }

            // Add event listeners
            displaynameInput.addEventListener('input', sanitizeDisplayNameInput);
            displaynameInput.addEventListener('blur', function () {
                sanitizeDisplayNameInput();
                // Remove trailing spaces when the user leaves the field
                displaynameInput.value = displaynameInput.value.trimEnd();
            });
        });

.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
    width: 80%;
    height: 50px;
    border: 1px solid #dee0e4;
    border-left: 0;
    margin-bottom: 20px;
    padding: 0 15px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    outline: 0;

<input type="text" name="display_name" placeholder="Display Name" id="display_name" required minlength="2" maxlength="50" style="text-transform: capitalize;" tabindex="3" oninvalid="alert('Please enter a valid display name!');" pattern="^[A-Z][a-z0-9W_]*( (?! )([A-Z]|[0-9W_])[a-z0-9W_]*)*$">
<input type="submit" value="Register" tabindex="6" id="submit" name="submit" style="margin-top:10px; width:400px;">