react-validation-mixin icon indicating copy to clipboard operation
react-validation-mixin copied to clipboard

Implement isDirty() functionality.

Open 40818419 opened this issue 9 years ago • 7 comments

Let's imagine we got a Button in a form which suppose to be disabled when required fields in a form are empty. Basically we should prevent user to click / fire event on enter when form is invalid.

Output should be like e.g:

<button disabled={!this.props.isValid() && this.props.isDirty() } > Sign in</button>

40818419 avatar Nov 10 '15 16:11 40818419

This seems to be a common request; provide a way to silently validate the form.

Something like:

this.props.validate({
  silent: true,
});

However, there are many issues with this implementation since validate() is async.

jurassix avatar Nov 10 '15 17:11 jurassix

Well after a little more thought, it would not be hard to handle the async validation.

this.props.validate({
  silent: true,
}, (nextErrors) => {
  this.setState({
    disableSignin: isEmpty(nextErrors),
  });
});
<button disabled={this.state.disableSignin}>Sign in</button>

jurassix avatar Nov 10 '15 17:11 jurassix

+1 We need a way to validate without changing the state of the component (in a true functional way) as proposed with the silent argument.

webholics avatar Feb 09 '16 15:02 webholics

@webholics u interested in putting together a PR? I will prioritize this work otherwise.

jurassix avatar Feb 10 '16 02:02 jurassix

Unfortunately I discovered that the silent flag doesn't even solve our problem. Since the validate function is async I don't really know where to put it in the lifecycle of our form component to guarantee that the button is always disabled when the data is invalid.

Question: Why is validate() async? Joi's validate method can be used synchronously? This would make things much easier.

webholics avatar Feb 11 '16 09:02 webholics

At this point I think we should stick with async validation. I do see what you mean about lifecycle's here. There may be a declarative solution in here, I think need to think about it more. If you have ideas please share. I'll do the same.

jurassix avatar Feb 11 '16 20:02 jurassix

We could do basically the same as Joi does by letting validate() only behave async if a callback is provided and otherwise use the sync version. This way we wouldn't have any breaking changes. But I'm not sure if having a sync version is possible with other validation strategies you may want to support in future.

webholics avatar Feb 15 '16 08:02 webholics