Common

Javascript Get Current Date | Today Date How to change Font Style in Windows 11 Computer, Laptop? How to change font color in windows 11 Desktop, Laptop? Windows 11 Font size too small or too big | How to Fix? Windows 11 Font size suddenly changed in desktop or laptop How to fix Windows 11 Blurry or Fuzzy Fonts, Text, Taskbar How to Restore Default Fonts in Windows 11 Desktop or Laptop How to Uninstall Windows 11 to Windows 10 (Go Back, Reinstall, Recover, Roll Back) How to resize taskbar size in windows 11 How to Hide Taskbar in Windows 11 While Watching YouTube How to Move Taskbar Icons to the Left in Windows 11 How to Move Taskbar to the Top in Windows 11 22H2 (Desktop, Laptop, PCs) Keyboard Shortcut to Hide Taskbar Windows 11 How to fix Windows 11 Taskbar Not Working/Showing (Desktop, Laptop, PCs) Use Font Awesome Icon in Placeholder Font Awesome Spinner Animation Font Awesome icon animation on hover Material Icons CDN - Google CDN Link How to Connect Javascript file to HTML file Bootstrap Toast Message Example How to Pin This PC to Taskbar in Windows 11 Desktop, Laptop Javascript concatenate string and variable Javascript Convert String into HTML React Js Remove leading Zero from Number Javascript Color Picker - React Js | Vue Js Javascript width based if else condition | React Js | Vue Js Javascript Convert Array to Set - React Js | Vue Js Javascript Convert Array of String into Array of numbers - React Js | Vue Js How to allow only alphabets in Input Field in Javascript Vue Js open Multiple tab by one click Instagram Threads Icon/Logo (SVG, PNG, PDF) | Thread Logo Meaning, Download Code How to Delete Threads Account Permanently (Deactive, Remove, Hide) - Android, IOS Javascript implement search functionality in array of objects Angular Js Round Two Decimal Places AngularJS Get Element Scroll Position Angular Js Get Element Height and Width Zayn Malik Net Worth 2023 | Biography, Family, Zodiac Signs, Songs, Tattoo Angular Js Get Element by Id Jennifer Lopez Net Worth 2023: Biography, Family, Husband, Upcoming Movie, Favorites Angular Js Generate Random Number X.AI Logo SVG, PNG | X AI Elon Musk Company | Download X.AI SVG Icon Code To Automatically remove rows that start with "/character" in a Google Sheet Add prefix to each row in Google Sheets Font Awesome Icons Change Color on Hover React Js Convert Image to Base64 Encoded Binary Node Js Get Current Directory Roboto Font Family CDN Poppins Font Family CDN & Download Major River in South America Vuetify Mdi Delete Icon

How to allow only alphabets in Input Field in Javascript

In this tutorial, we will learn how to validate a text field using React JS or JavaScript. Specifically, we will ensure that only alphabets are allowed, along with only one space and alphabets, to validate user input. This validation aims to accept only certain types of characters. To achieve this, we can utilize regular expressions (regex) to check the input value and prevent invalid characters from being entered.

written

reviewed

updated

Example 1 : How to Allow Only Alphabets in input field in Javascript?

In this first example of JavaScript, only alphabets are allowed using regex. When a user inputs text into the field, the `validateInput` function is called. Inside the function, a regular expression (`/^[A-Za-z]+$/`) is used to check if the input consists only of alphabetic characters or English letters for name validation. If the input does not match the regular expression, the last character is removed from the input field's value, effectively accepting only alphabet characters.

Javascript Only Alphabets are Allowed | Regex Alphabets Only

  <body>
    <div id="app" class="container">
      <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>
  </body>

Run

Output of Javascript input field allow only alphabets

Example 2 : React textinput allow only alphabets

In this second example, we use ReactJS to allow only alphabet characters to be entered. We use a regular expression (^[A-Za-z]+$) to validate the text field.

React Js input field allow only alphabets

    <script type="text/babel">
      const { useState } = React;

      const App = () => {
        const [inputValue, setInputValue] = useState("");

        const handleChange = (event) => {
          const regex = /^[A-Za-z]+$/; // Regular expression to allow only alphabets
          const { value } = event.target;

          if (regex.test(value) || value === "") {
            setInputValue(value);
          }
        };

        return (
          <div className="container">
            <h3>React Js input field allow only alphabets </h3>
            <input
              type="text"
              value={inputValue}
              onChange={handleChange}
              placeholder="Enter alphabets only"
            />
          </div>
        );
      };

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Allow Only Alphabets in Input HTML

Example 3 : Javascript only 1 space and alphabets allowed

In the third example of validation that only allows alphabets and one space, we use JavaScript to validate the user input. In this example, you will learn how to write a simple JavaScript function that checks if the input value matches a regular expression allowing only letters and one space.

Javascript only 1 space and Alphabets Allowed

  <script>
        function isValidInput(input) {
                // Allow only single spaces and alphabets
                return /^[a-zA-Z]+(?:\s[a-zA-Z]+)?$/.test(input);
            }

            function validateInput() {
                let userInput = document.getElementById("inputField").value;
                let resultElement = document.getElementById("result");

                if (isValidInput(userInput)) {
                    resultElement.innerText = "Input is valid";
                    resultElement.className = "valid";
                } else {
                    resultElement.innerText = "Invalid input";
                    resultElement.className = "invalid";
                }
            }

    </script>

Run

Output of Regex for Only 1 Space and Alphabets Allowed in Javascript

Pasted Image

Releated Tutorials

👉 Vue Js Validate Textbox to Accept only Alphabets