Textfield: add props for setting externally checked validity of field about react-mdl HOT 13 CLOSED

Hmm... So we'll have 2 ways of managing the validity of the textfield (either with pattern or with invalid). Don't know if it's a good idea. Could be misleading if users use both props at the same time :/

I agree with you that server validity is not possible just by using the pattern. Maybe add a valid props could be the answer (I prefer using valid instead of invalid ;)). But in that case, we would probably remove the pattern prop and let the user do the pattern inside the valid prop.

But at the same time, pattern is an existing prop on an input field so I guess we have to handle this case as well :D

from react-mdl.

Maybe can we make the props name a bit more explicit ? Something like forceInvalid (or forceValid, although in my opinion, a field is valid by default and we want to force displaying errors only if it doesn't fit our business logic).

But it you look as the demo example I added, the password confirmation, this is a very common use case and pattern props cannot manage it afaik.

from react-mdl.

Actually, by default a field is invalid if the value doesn't match the pattern. (That's weird but it's like that :/)

from react-mdl.

Yes but the pattern prop being optional makes it all questionable.
Anyway, happy to take whichever convention you think is best as long as we can introduce this idea of being able to have externally validated fields :-)

from react-mdl.

Sure we definitely have to introduce a way to force the state.

We could introduce a feature inside react-mdl now but we will probably need to refactor the code once this is done on the MDL side google/material-design-lite#1136 (context: google/material-design-lite#1132)

At the same time, I was thinking of removing the permanent error prop and only add/use it when the field is actually invalid. So we could merge the forceInvalid and error prop.

from react-mdl.

Having only error set is indeed a nice solution !
Let me know should you want a PR or if you feel like doing it yourself. In the latter case, you can close my PR.

from react-mdl.

If you're willing to do it, you can do it. Otherwise I'll do it when I've time.
Update your current PR or create a new one is fine. I'll review and test it after that to make sure everything is ok

from react-mdl.

I'll take a stab in Monday then. Weekend is weekend :-)

from react-mdl.

Oh but then what would be the expected behavior when using pattern prop ? Because when using pattern, we should always set error even if field is valid. Hence it wouldn't be consistent with using error only field, right ?

from react-mdl.

Maybe remove pattern?
When the onChange callback is called, the developer can check the validity (by using a regex pattern for example) and set the error prop if needed.
It's more general that way, could be the solution.

from react-mdl.

Removing pattern is a bit of a downgrade / deviation from original mdl library, don't you think ? Take the number textfield example in the demo. It wouldn't look as nice and simple without the pattern.

from react-mdl.

Yeah. maybe..
Maybe we could add a custom prop validator to check that error is provided if pattern is also provided. Or maybe error could be really optional. I have to double check this but error is just the text, right, so even if the pattern is invalid but without the error text, the field should still turn red.

from react-mdl.

+1 for your last comment tleunen.

Right now I run into limitations because I have to to async validation.

from react-mdl.