jurassix / react-validation-mixin

Simple validation mixin (HoC) for React.
MIT License
283 stars 38 forks source link

Validating dynamic sub components #62

Open crazyUI opened 8 years ago

crazyUI commented 8 years ago

HI,

How can we use this mixin to validate dynamic sub components ? Is there a way to pass the sub component validation status to the parent component ?

Appreciate your help

Thank you

jurassix commented 8 years ago

Can you provide a small code sample? I assume you mean something like:

The Parent component is wrapped with the Validation library but the Children are not?

<Parent>
  <Child/>
  <Child/>
</Parent>
crazyUI commented 8 years ago

Parent component is wrapped with the validation library. Do the child components need to be wrapped with separate validation library.. Or we can call the parent validation library methods from the child component as well ?

For example,

Parent - Has one text input field which cannot be empty Child - Has three number fields which has some other validation requirements

Can I include all validations in the parent or need to have separate validationTypes and methods in the child component as well..

Thank you!

jurassix commented 8 years ago

@crazyUI I think the best implementation will be to pass as props from the Parent the following props:

<Parent>
  <Child onChange={this.onChange.bind("child")}
              value={this.state.child}
              hasError={this.props.isValid("child")}
              />
</Parent>

In this way the only the Parent is wrapped with the validation library, but the children are given control to display the error to change the value and the parent can hook into the onChange handler to update state and validation.

I do this in projects where the Child may be Input component from react-bootstrap etc...

luyanchun commented 8 years ago
```

in this way, how to show the error message? if there are three input in the Child,there will be three of theme all with error message? or i have to cotrol the error msg

and also,when the parent form will be submit,how to call the validation method of the child?

jurassix commented 8 years ago

If you are validating N fields in the child just pass down the isValid and getValidationMessages functions to the Child. Be sure to expose the data to the parent.

Currently talking through options in another thread: #66