'MUI Input field that only accepts letters, numbers, and dashes?

How could I restrict a MUI input field to only accept letters, numbers, and dashes? So spaces and and symbols (*&^%$#@!,.<>{}[]) would be excluded.

More specifically, I'd like to allow anything that wouldn't cause a URL to crash, i.e. https://mywebsite.com/user-generated-string-here123.

Thanks!

reactjstypescriptformsinputmaterial-ui


Solution 1:[1]

You could pass a handler to onKeyDown and check for the pressed key. Exclude if the pressed key is other than alphabet, number, or dash.

const ALPHA_NUMERIC_DASH_REGEX = /^[a-zA-Z0-9-]+$/;

<TextField
  onKeyDown={(event) => {
    if (!ALPHA_NUMERIC_DASH_REGEX.test(event.key)) {
      event.preventDefault();
    }
  }}
/>

Alternatively, for controlled components, you can validate in onChange handler and update the state based on the value. This will also validate the value that is pasted in the text field and ignore if the condition doesn't pass.

const [value, setValue] = useState('');

<TextField
  value={value}
  onChange={(event) => {
    const value = event.target.value;
    if (value !== "" && !ALPHA_NUMERIC_DASH_REGEX.test(value)) {
      return;
    }
    setValue(value);
  }}
/>

Here's the link to the working demo in codesandbox.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bhalahariharan V

Related Questions