React Allow Only Alphanumeric Character

React is used to handle user input from forms or text fields. Sometimes, you may want to restrict the input to only certain types of characters, such as letters or numbers. To achieve this, you can use regular expressions (regex) to validate the input and prevent invalid characters from being entered. In this article, we will show you how to use regex to create input fields that accept only alphanumeric characters and how to implement input pattern alphanumeric validation in React

written

reviewed

updated

How to Only Alphabets and Numbers are allowed in React Js?

React.js input fields should only allow alphabets and numbers. To restrict an input field in React.js to only allow alphanumeric characters, you can use regular expressions and event handlers. Start by attaching an onKeyDown event handler to the input field. In the event handler, access the event object and check the keyCode value. If the pressed key is not alphanumeric (A-Z, a-z, or 0-9), prevent the default behavior using event.preventDefault(). This ensures that only alphabets and numbers can be entered. Additionally, you can also validate the entire input value against a regular expression pattern using inputValue.match(/^[A-Za-z0-9]+$/) to provide immediate feedback or validation error messages

React js Input field allow only alphabets and number Example

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

        function App() {
            const [inputValue, setInputValue] = useState('');
            const [error, setError] = useState('');

            const handleInputChange = (e) => {
                const { value } = e.target;
                const alphanumericRegex = /^[a-zA-Z0-9\s]+$/;

                if (value === '' || alphanumericRegex.test(value)) {
                    setInputValue(value);
                    setError('');
                } else {
                    setError('Please enter only alphanumeric characters and spaces.');
                }
            };

            return (
                <div className='container'>
                    <h1>React Js Input field allow only alphanumeric letter </h1>
                    <input
                        type="text"
                        value={inputValue}
                        onChange={handleInputChange}
                        placeholder="Enter alphanumeric value"
                    />
                    {error && <p style={{ color: 'red' }}>{error}</p>}
                </div>
            );
        }

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

Run

Output of React Input Field Allow only Alphanumeric

How to Allow only Alphanumeric in Input Field in Javascript?

JavaScript is used to validate user input and ensure it conforms to specific rules. For instance, you might want to permit only alphanumeric characters in a username field. In JavaScript, you can employ regular expressions (regex) to verify the string's format and reject any invalid characters. A regex is a pattern that defines a set of matching strings. For example, the regex /\\w+/ matches one or more word characters, equivalent to [A-Za-z0-9_]. To accept only alphanumeric characters, apply this regex and test it against the input string using the test() method. You can also utilize the input element's pattern attribute to specify a regex that the input value must match. For instance, <input type="text" pattern="\w+" /> will make JavaScript accept only alphanumeric characters

Allow Only Alphanumeric in Textbox using Javascript

<body>
   <div id="input-container">
        <h1>Allow Only Alphanumeric in Textbox using Javascript</h1>
        <input type="text" onkeypress="allowAlphanumericOnly(event)">
        <p id="error-message">Please enter only alphanumeric characters.</p>
    </div>
       <script>
        function allowAlphanumericOnly(event) {
            var charCode = event.which || event.keyCode;

            if ((charCode < 48 || charCode > 57) &&
                (charCode < 65 || charCode > 90) &&
                (charCode < 97 || charCode > 122)) {
                event.preventDefault();
                displayErrorMessage();
            } else {
                clearErrorMessage();
            }
        }

        function displayErrorMessage() {
            document.getElementById("error-message").style.display = "block";
        }

        function clearErrorMessage() {
            document.getElementById("error-message").style.display = "none";
        }
    </script>

</body>

Run

Output of Only Alphabets and Numbers are Allowed in Javascript

Pasted Image

Releated Tutorials

👉 Vue Js Allow Alphanumeric Character in Input Field

React JS Tutorial