final-form / final-form/final-form

Trim whitespace on fields before validate / onSubmit

Open
#242 2 comments 0 reactions 0 assignees View on GitHub
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

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.