Form validation using regex is not working TextField MUI React

Question

I am trying to add a regex pattern in inputProps for validation of Textfield and required but both not working, on click of next the empty or wrong input is also getting entered.

  <TextField
            id="outlined-basic"
            name="s_firstName"
            label="First Name"
            variant="outlined"
            defaultValue={user.s_firstName}
            onChange={handleChange} 
           
            inputProps={{pattern: "[a-z]"}
            required />

Please can you help what wrong is there validation not working?

https://stackoverflow.com/questions/55258192/how-to-apply-a-pattern-to-a-textfield-to-only-allow-specific-characters That can help you — mc-user, Apr 09 '22 at 00:16
@mchowdam; Thanks I tried but it didnt worked . I want to display message also about wrong entry. Any sample code if you can provide, MUI v5 — , Apr 09 '22 at 00:40

AnthonyDev220 · Accepted Answer · 2022-04-09T02:29:31.853

2

Your code seems fine, and required is working if you submit the form. It shows which field is required with a mark on the label.

In material ui,

required bool
If true, the label is displayed as required and the input element is required.

You will notice a warning popup as you type in your input.

For validation, you could write your own function with onChange.

  const handleValidation = (e) => {
    const reg = new RegExp("[a-z]");
    setValid(reg.test(e.target.value));
    setValue(e.target.value);
  };

With the error prop of <Textfield>, you could do something like this,

          <TextField
            id="outlined-basic"
            name="s_firstName"
            label="First Name"
            variant="outlined"
            value={value}
            onChange={(e) => handleValidation(e)}
            error={!valid}
            required={true}
          />

Check out this demo for code of two scenarios.

edited Apr 09 '22 at 02:29

answered Apr 09 '22 at 02:23

AnthonyDev220

669
5
17

Thanks for responsing, what I have done how to display the error message and if user enters thewrong format and pressess next button its not working. @AnthonyDev220 – Apr 09 '22 at 02:44
for the one which I have asked there are many fields of form, then can be checked but how to show error message thant is coming on hover now. – Apr 09 '22 at 03:33
@Tanyamaheshwari could you rephrase your question? I don't quite get what you are asking. – AnthonyDev220 Apr 09 '22 at 03:52
I want to display error message also with the error. Secondly if user enters wrong value and presses submit button, the user moves ahead @AnthonyDev220: – Apr 09 '22 at 04:02
@Tanyamaheshwari I think you might need to post a new question with detailed example, and provide your code and what you have tried, to prevent excessive discussion here. – AnthonyDev220 Apr 09 '22 at 04:09
https://stackoverflow.com/questions/71805286/form-validation-mui-react-not-working-on-click-of-next-button @AnthonyDev220: – Apr 09 '22 at 04:38

score 0 · Answer 2 · edited Jun 29 '22 at 00:44

0

If you want to show error message then use "helperText"

<TextField
    error={value=== ""}
    helperText={value=== "" ? 'Please enter a value!' : ' '}
>

edited Jun 29 '22 at 00:44

ZygD

22,092
39
79
102

answered Jun 28 '22 at 06:05

Foot staR

9
2

Form validation using regex is not working TextField MUI React

2 Answers2