Semantic-ui-react: How do I validate forms with Semantic-UI-React

[VanessaRLewis]

I couldn't find documentation for Form Validation on http://react.semantic-ui.com and was hoping someone could point me in the right direction.
Has Form Validation been implemented yet in Semantic-UI-React? If so, are there any usage documents I can look at? If not, do I use normal Semantic UI's form validation or something like formsy-react?
I did look at the RFC: Form Validation #407 (https://github.com/Semantic-Org/Semantic-UI-React/issues/407) but it seemed like proposals for ideal Form Validation & Form Component.

[levithomason]

Not yet implemented, see #407 for the latest convo. For now, you'll have to roll your own validation.

[shahidmau]

+1

[mairh]

For you own validation I can recommend Redux Form. It integrates nicely with Semantic-UI-React. If you need an example I can create a gist for you.

[TrebuhD]

@mairh I would love to see said example!

[mairh]

@TrebuhD Here you go https://gist.github.com/mairh/233f6b4ffdbaaed8ec75bb0bef087e8f

I tried to explain things as clearly as I could and also divided the code into separate components so that it reusable thought the codebase. You still have to define the redux-form in your reducers. (I have omitted that part since it is redux specific - Not related to redux-form or semantic-ui-react

[dondre]

I just bite the bullet and installed forms.js and jquery. This validation was too good to pass up.

[levithomason]

Just know it will break as soon as React replaces one of the DOM nodes on render. jQuery event listeners will be attached to the old DOM node.

I would highly recommend using one of the react libs and implementations suggested in #407.
There are many great solutions there.

[dondre]

That won't happen as I'm writing to the document body. I actually had to add a check to prevent the script from duplicating on re-renders.

I really like this form-validation, I hope you guys can implement something similar.

[doanhuudung]

Waiting for validation's feature 💃

[levithomason]

@doanhuudung Good news, that feature was shipped in 2016 :)

Semantic-UI-React !== Semantic-UI

The React port (this repo) is jQuery free for the reasons noted. The original repo is a jQuery based implementation.