Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On initial form render, form is considered valid until a change event occurs #98

Open
SpiritBreaker226 opened this issue Apr 29, 2016 · 3 comments
Labels

Comments

@SpiritBreaker226
Copy link
Member

Consider the following Frig form:

<Form data={data} onChange={onChange} onSubmit={onSubmit} >
  <Input type="string" name="some_input" required="true" />
  <Submit title="submit" />
</Form>

Expected: When clicking Submit, the form should not submit, an error message for some_input should be shown.

Actual: When clicking Submit, the error message quickly flashes, but then the form is submitted.


This only occurs when no change events have been fired on the form. For example, typing anything in the input, or even focusing the input, would cause a change event to fire, and from there on validation works as expected.

This issue would happen, for example, when clicking "Login" on a form without attempting to fill the form. It should not call onSubmit since it failed validation.

@SpiritBreaker226
Copy link
Member Author

SpiritBreaker226 commented Apr 29, 2016

The root cause of this is in <UnboundInput>'s validate() function:

  validate() {
    this.setState({ validationRequested: true })
    return this.isValid()
  }

This is called, indirectly, via <Submit/>'s onClick handler.

Subsequently, in _errors(), we read from this.state.validationRequested:

_errors(nextValue = this._value()) {
    let errors = this.props.errors
    const validate = (
      (this.isModified() || this.state.validationRequested) &&
      this.props.validate
    )
    // [....]
}

Recall, we're still in <Submit/>'s onClick event, the same one that called setState. This is not allowed in React. Reading from this.state is only reliable in render().

References:

@jbinto
Copy link
Contributor

jbinto commented May 2, 2016

We plan to remove validations in Frig 1.0 so that users have finer grained control over their validations. Right now, users cannot opt out of field-level onChange validation without opting out of validation altogether.

Marking this WONTFIX for now.

@jbinto jbinto added the wontfix label May 2, 2016
@jbinto
Copy link
Contributor

jbinto commented May 2, 2016

See #103

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants