form validation in react -

i wondering how people handle form validation. have inputs have "isvalid()" method on them , in form component, have call

if(this.refs.username.isvalid()    && this.refs.firstname.isvalid()    && this.refs.lastname.isvalid()    && this.refs.email.isvalid()    && this.refs.password.isvalid() ) 

and that's beginning of boilerplate. if iterate through this.props.children , call isvalid on them go long way can't seem make work.

i can't seem iterate through this.refs , dynamically either. think. pretty sure tried that.

but if can't interrogate component's children , call methods on them there going ton of boiler plate code in my/everyone's app.

has dealt yet?

thanks,

r

edit - code demonstrate i've tried

react.children.map(this.props.children, function (     var valid = child.isvalid(); }); 

here child has props, ref, , type. helpful in general not in situation. want have access actual instance can call valid function on it.

edit again

i appreciate pointer answer, however, don't feel similar question. i'm not asking how validate, i'm asking whether has found ways wrap validation. answer given in other post example above, verbose , repetitive, show 1 field on form doesn't bad trust me after couple of forms going want kill yourself.

so clarify, i'm asking, given repetitive nature of asking every child component if in valid state, , if not, error have , aggregating information, there better way. perhaps if dynamically iterate through children wrap functionality up, have not been able that.

edit again

here repo messing stuff.

https://github.com/reharik/react-demo/tree/master/src

it's editable display form or whatever. go page , can view data if want edit click button. edit form , submit. that's playing with, "rhform" used regular forms.

it's pretty simple rhinput validates on change , has isvalid() method. app.jsx has call isvalid() on it's children. if @ rheditableform you'll see perfect place dynamically call isvalid() on whatever happens in there. reused forms , i'd never/rarely have write validation logic. since "ok" button seems correct place put validation.

your question intrigued me, far haven't run problem this, nonetheless problem raised legit one. so, after playing little bit react, kinda found solution avoids looping through refs or children (actually if loops on children not when validating).

the solution found use react component wrappers on each form field, , react element form itself. when rendered, form react component clones each child oncomponentmounted property. it's called form fields when mounted. here, things simple. oncomponentmounted callback add field "fields" state property, property iterated when form submitted; controls expose "isvalid" method asked validate.

this approach allows easy form constructions following:

react.render(<validatingform>         <textfield name="firstname" />         <textfield name="lastname"/>         <textfield name="email" />         <textfield name="password" />         <button type="submit">signup</button>         </validatingform>, document.getelementbyid('form1')); 

the full source can found here: http://jsfiddle.net/6tjz2b6r/. simplicity there's 1 control supported: textfield; however, other types of controls can added.