final-form / final-form/final-form
Trim whitespace on fields before validate / onSubmit
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 225
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Possibly a **feature request**, more a question: what I want may already exist :-)
### What is the current behavior?
I want to trim the values of specified fields before they are passed to `validate` and `onSubmit`, but allow them to contain the leading/trailing spaces in the actual values in the form.
Example UX Scenario: imagine a user pastes a value into an input, and that copied value contains leading and/or trailing spaces. I want to allow that, and even display that (I don't want to do anything fancy like mutate the actual value and auto-remove the spaces, just leave it as it is) but when the values are validated and submitted I want to just ignore any leading/trailing whitespace.
Right now, I'm doing this with a higher-order function that wraps validate and onSubmit at the form level - it looks like this:
(Note this code is React specific, but obviously this could be applied to any final-form library implementation)
```
const buildTrimWhitespaceHOF = (fields) => (validateOrOnSubmit) => (values) => {
// trim specified fields
fields.forEach((field) => {
const value = values[field]
if (value && value.trim) values[field] = value.trim()
})
// pass trimmed values on to validate or onSubmit
return validateOrOnSubmit(values)
}
// builds HOF to trim whitespace on fields 'foo' and 'bar'
const trimWhitespace = buildTrimWhitespaceFunction([ 'foo', 'bar' ])
- - -
... fields including 'foo' and 'bar' ...
```
### What is the expected behavior?
What I'd like is a way to set this up using FieldProps, on the field level, so it's more declarative. I suppose what I'm really after is a prop that modifies whatever value is passed for that Field to both `validate` and `onSubmit`.
I initially thought this might be the behaviour of `parse`, but was wrong - `parse` actually modifies the value in the form field itself, which I don't want. The reason is as above - I want to trim only when validating and submitting, but actually allow leading and trailing spaces in the form, for a more natural UX.
Is there a Field prop that does anything like this - or at a completely different, better way than what I'm doing above that achieves the same thing?
If no, how do you feel about implementing such a prop? Like, maybe even specifically to `trim`, as this is probably a very common requirement for forms. I'd imagine it looking something like this:
(Again, React, but just a prop so I believe the core library is the right place to be asking this)
```
// trim foo and bar for validate and onSubmit, but *not* password
...
...
...
```
Happy to implement this as a PR, for further evaluation of the idea in practice, should you think it might be worth exploring further.
Contributor guide
Assessment
This issue has not been assessed yet.