Validate onInput and not onChange

[lydemann]

Hi,

I want the form to validate the form onInput and not onChange as it does now, because this won't give me feedback as I type and i have to click away from the current input to get form validated. Is there any way to validate onInput or maybe this should be the default behaviour for formsy?

For info about the difference between onInput and onChange:

onInput vs. onChange

[mathportillo]

I agree that this is a good behaviour, but there is two considerations to me made:

• onChange prop on React behaves like onInput described by your link, as seen here
• There is a bad outcome of just triggering validation on React onChange event (js onInput), as better explained below:

Currently, the Formsy.Form onValid event is only called when a child input is blurred (focus out). This has a bad behavior of only executing the Formsy.Form onValid event on input blurs. If, for example, a submit button should be activated when the form is valid, this ends up only happening on blur, and not really when the form becomes valid.

By reading the issues I realized (correct me if I am wrong), that erstwhile a form validation occurred when onChange events triggered on child input elements. This triggered the Formsy.Form onValid as soon as possible, but had the bad behavior of displaying error messages while user was typing.

I think that an optimal behavior was to trigger a Formsy.Form onValid event as soon as the form is valid (on input onChange event is triggered). And to trigger error messages only on blurs (as of now). Based on my experience, this is the behavior of old good form solutions (as for example the default Angular 1 form helper).

If the optimal behavior I described is already possible to be achieved in formsy-react, please teach me how and pardon my bother. If it is currently not possible to be achieved, please consider if it is a good idea to do so. If agreed that its a good idea, I suggest two solutions (I believe that perhaps these are not so good since I haven't examined the code enough):

1. Conservative solution:
   • A additional onValueValid event prop to be added to the Formsy.Form component, this would keep the current onValid behavior untouched,
   • A onChange listener at the Mixin that, each time the value is changed, sets a new isValueValid based on the return of the runValidation function. It would also a method in Formsy.Form that would check if all the child mixins isValidValue function returns true, if so, it would trigger `onValueValid
   • Instead of Mixin isValueValid run the function runValidation, it could only return the isValueValid state of the Mixin itself.
2. Aggressive solution:
   • The validate function would not set the component _validationError state.
   • The _validationError state would only be set on input blur.
   • The validate funcion would be trigered on input change. This would change when the current Formsy.Form onValid event is called.

[navasiloy]

there is a workaround you can componentDidMount() { this.refs.labeledInput.focus() this.refs.labeledInput.blur() }

it fill fire validation rules