How to allow only alphabets in Input Field in Javascript

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="app" class="container">
      <h3>JavaScript input field allowing only alphabets</h3>
      <input
        type="text"
        id="inputField"
        placeholder="Enter alphabets only"
        oninput="validateInput(event)"
      />
    </div>

if (!regex.test(value)) {
          inputField.value = value.slice(0, -1);
        }
      }
    </script>

input {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 300px;
      }

input:focus {
        outline: none;
        border-color: #61dafb;
      }
    </style>
  </body>
</html>

​x
 
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="app" class="container">
      <h3>JavaScript input field allowing only alphabets</h3>
      <input
        type="text"
        id="inputField"
        placeholder="Enter alphabets only"
        oninput="validateInput(event)"
      />
    </div>
​
    <script>
      function validateInput(event) {
        const inputField = event.target;
        const regex = /^[A-Za-z]+$/;
        const value = inputField.value;
​
        if (!regex.test(value)) {
          inputField.value = value.slice(0, -1);
        }
      }
    </script>
​
    <style>
      .container {
        margin: 0 auto;
        width: 600px;
        text-align: center;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
          0 2px 4px 0 rgba(0, 0, 0, 0.24);
        padding: 20px;
      }
      h3 {
        font-size: 24px;
        margin-bottom: 10px;
      }
​
      input {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 300px;
      }
​
      input:focus {
        outline: none;
        border-color: #61dafb;
      }
    </style>
  </body>
</html>
​