Material-ui: Form Validation

[anchann]

Is there a pattern that's recommended for form validation, like hooking up validity states of input controls to the disabled attribute of the submit button, etc? Or is the idea that it gets handled in a completely ad hoc way, using onChange events and state variables?

[rojobuffalo]

@anchann good question. I'm wondering the same thing.

I'm going to fork and try to incorporate the validation patterns from this article.

[timarney]

I haven't tried using with this repo but you might want to checkout tcomb-form it has really good validation.

https://github.com/gcanti/tcomb-form

You can checkout a demo ... Choose a bootstrap theme -> Paper
https://gcanti.github.io/resources/tcomb-form/playground/playground.html

[rojobuffalo]

@timarney thanks for pointing that out.

The style for that bootstrap-paper theme is close but not quite as good as material-ui.

It's great that there is a form component out there with really good validation. But tying the two together doesn't seem like it would work because they both generate their own markup and styles.

[timarney]

There is a standalone validation package -> https://github.com/gcanti/tcomb-validation#form-validation

https://github.com/gcanti/tcomb-validation

[rojobuffalo]

@timarney, @anchann
This is working: link

[vaiRk]

I've implemented some basic validation stuff on TextFields (bit of a test for now): https://github.com/vaiRk/material-ui/pull/1/files

The validations prop takes an array of functions so it would be easy to use with any validation library or just write your own. I haven't thought about how to display multiple error messages but maybe the validation functions could return true if valid, otherwise either false or a string to use as error message.

I think it wouldn't be too hard to create a Form component that links to its fields valid states.

Thoughts?

[Kagami]

Have the same question.. This is how I'm doing it currently. A lot of boilerplate. Even worse, value propery of TextField cause latency issues so I ended up doing setValue after onBlur manually.
Though I'm using relationships between form fields, so I'm not sure whether it's possible to refactor using some existing validation library. I looked at few one and they were too simple.

[rojobuffalo]

The Formsy module works really well to solve this problem.

I implemented it in my form component here, which also handles the case where the user needs to add an extra input.

[Kagami]

Thanks! I will look into it.

[mbrookes]

I converted @rblakeley's example into a small wrapper library for material-ui components: https://github.com/mbrookes/formsy-material-ui