TextField Validation Style

[PunkFleet]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the 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]

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

[PunkFleet]

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]

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

 <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]

michaldudak

@michaldudak

[michaldudak]

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]

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*/} />