'React MUI show error tip if TextField error matches when submit is clicked

On a standard form using MUI in react, when a type of input is set, let's say type="email", a basic validator shows when the submit button is pressed in case the address does not match some basic rules (i.e."needs an @").

I'm trying to achieve the same effect, a warning message if a custom requirement does not match. So I'm using the property error to set the input value to be larger at least 9 numbers, if it doesnt, the custom warning message should appear.

However, as shown below, the field marks red if the error matches, but I can submit the form anyways, which is what I'm trying to avoid.

 <TextField
     fullWidth
     label={<>Teléfono</>}
     value={inp.tel}
     error={inp.tel.length<9}
     type="number"
     onChange={(e)=>anadirValor(e,index,telFormValues,setTelFormValues, "tel")}
     id="outlined-size-small"
     size="small"
     color="primary"
     autoComplete="new-password"
     required
  />
reactjsformsmaterial-ui


Solution 1:[1]

Simplest way would be to have a disabled state, and set that to true if TextField isn't valid! Then pass that state to the submit button's disabled prop and prevent the click.

You'd also need to set it back to false if the TextField value is valid to re-enable the submit button

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 Wasim Abuzaher

Related Questions