final-form / final-form/react-final-form

Feature Request: Ability to prevent user input and indicate prevention reason

Open
#361 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.4k
Forks
497
PR merge metrics
No merged PRs in 30d

Description

Please forgive me if RFF already supports this requested behavior, but I am unable to figure out how to achieve what I want.

I think it would be valuable to allow the prevention of a form field change and be able to indicate why it was prevented. This seems to be in between a validator and a parser, but maybe more similar to a parser.

Use case: for inputs that are well-formed (matching a distinct pattern or a maximum length), it would be useful to prevent the user from entering data that is clearly incorrect and be able to display the reason why it was prevented.

* Numeric Inputs: If a user entered non-numeric data, it would be rejected and they would be notified to only use numbers
* Max Length: When the maximum character count is reached, further input is rejected and the user is notified

It feels like this desired behavior is split between a validator and parser but closer to parser:
* parsers can change the incoming data to sanitize/clean data
* parsers cannot emit state metadata (reason why that keystroke was rejected)
* validators can emit state metadata (why the data is invalid)
* validators cannot change the underlying value

It would seem that if a parser threw an error, RFF could catch this error, revert the input to the last accepted parsed value, and pass that error down to the field render prop for use in the UI. Note, since the input would not be accepted, the validation error state would not change. Any parsing errors would not affect the validity of the form.

Thoughts?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.