mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.8k stars 32.25k forks source link

TextField Validation Style #36881

Open PunkFleet opened 1 year ago

PunkFleet commented 1 year ago

Duplicates

Latest version

Summary 💡

Please consider changing the error property to inValid and adding isValid, like bootstrap does: https://getbootstrap.com/docs/5.3/forms/validation/#server-side

Examples 🌈

No response

Motivation 🔦

No response

michaldudak commented 1 year ago

Why? We're not associated with Bootstrap in any way.

PunkFleet commented 1 year ago

Why? We're not associated with Bootstrap in any way.

I am just providing bootstrap as a functional reference. The usage scenario is: When I validate the textfield field content, I am able to easily hint through the error attribute, but when the validation is successful, this has some visual confusion because if the color attribute is set, then it will not be possible to distinguish the validation success from the initial state.

PunkFleet commented 1 year ago

I wrote a version, but this doesn't take into account all formats, this method loses the initial focus state, anyone offer some advice? image

 <TextField {...register("lastName")} sx={{width: '50%'}} type="text" variant="outlined" label="Last Name" 

 focused={(getValues().lastName !== "" && !errors.lastName) || !!errors.lastName}

 color={getValues().lastName !== "" && !errors.lastName ? "success" : "primary"}
 error={!!errors.lastName}  helperText={errors.lastName? errors.lastName.message : " "}  />
PunkFleet commented 1 year ago

michaldudak

@michaldudak

michaldudak commented 1 year ago

If the isValid API is more convenient for your use case, you can easily wrap the TextField in your custom component and set appropriate props:

function MyTextField(props: TextFieldProps & { isValid?: boolean }) {
  return <TextField {...props} color={ /* whatever logic you need */ } />
}

Does this help?

PunkFleet commented 1 year ago

Maybe your code existing bug that not including focus style i guess. and i using this for completely appropriate <TextField {...register("email")} sx={{width: '100%'}} type="email" variant="outlined" label="Email" placeholder="example@example.com" focused={/*customer logic*/} color={/*customer logic*/}error={/*customer logic*/} />