How to disable possibility to type numbers in string input field

Question

I have input field from which is InputText from PrimeReact and content of this field should always be text, not figures. I want to disable possibility to type figures. Below is code example. I also tried to make validation if typeof data is 'number' and then display comment, but data from input as I see is always a string

 <FloatingLabel text="Name" name={`luxmeds.${index}.persons.${idx}.name`}>
                          <StyledInputText
                            name={`luxmeds.${index}.persons.${idx}.name`}
                            value={person.name}
                            onChange={handleChange}
                            type="text"
                          />
                        </FloatingLabel>
                        {!values.luxmeds[index].persons[idx].name && (
                          <StyledWarningText>{'You need to provide a name'}</StyledWarningText>
                        )}
                        {typeof values.luxmeds[index].persons[idx].name === 'number' && (
                          <StyledWarningText>{'You need to provide a name'}</StyledWarningText>
                        )}

Can You please suggest how to achieve that ?

regards

adsy · Accepted Answer · 2022-09-17 22:28:29Z

2

You could just detect if the value passed to onChange contains a number, and if it does, do not set the state of person.name.

For example,

 const handleChange = (e) => {
      const numberRegex = /[0-9]/;
      if (!numberRegex.test(e.target.value)) {
        // set state
      }
   }

You might also consider using HTML5 pattern attribute:

                          <StyledInputText
                            name={`luxmeds.${index}.persons.${idx}.name`}
                            value={person.name}
                            onChange={handleChange}
                            type="text"
                            pattern="[a-zA-Z]*"
                          />

answered Sep 17, 2022 at 22:28

adsy

12k2 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to disable possibility to type numbers in string input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related