Focus first invalid field onSubmitFailed

[lydia-schow]

Goal: I would like to imitate native HTML5 behavior. When the user tries to submit an invalid form, the browser will focus on the first invalid field. This is really important for a good user experience on forms that require scrolling because the invalid field might be out of sight by the time the form is submitted.

Question: I'm having trouble figuring out how to do this. I think it might involve onSubmitFailed and actions.focus, but I don't know how to get the model name of the first invalid field. Any help?

I couldn't find any similar GitHub issues for this repository.

[craig-landry]

The callback and action you mention are correct as far as I have experienced. Here's an example onSubmitFailed function to get the first failing model and focus it::

  handleSubmitFailed(form) {
    Object.keys(form).some((key) => {
      let obj = form[key];
      if (obj.valid === false) {
        this.props.store.dispatch(actions.focus(obj.model));
        return true;
      }
    });
  }

[gormv]

This is a nice solution, but unfortunately the order of checking is not from top to bottom. Any advice on how to check from top to bottom in form would be appreciated :)