Html – 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"
tabindex="3"
oninvalid="alert('Please enter a valid display name!');"
pattern="^[A-Z][a-z0-9W_]*( (?! )([A-Z]|[0-9W_])[a-z0-9W_]*)*$">

<button class="availability" id="display_name-check-btn" type="button" onclick="checkDuplicate('display_name', document.getElementById('display_name').value)">Check Availability</button>

<input type="submit" value="Register" tabindex="6" id="submit" name="submit" style="margin-top:10px; width:400px;">