React Final Form: has a value existed?

Question

How is it possible to check has a value already existed using React Final Form? I'm interested in the general approach. Also, be thankful for some links, etc, because could find nothing relevant.

Now details:

1. I have a form: a text input "User name" and a button "Submit".
2. I type a value (let say, "John") and press "Submit".
3. The value is saved into a database and becomes to display on my web page.
4. The input field is cleared and I am able to enter the new value.
5. I'm entering "John" again.

I should get an error message "Such name has already existed" once I moved the focus out of the field, or click on the "Submit" button.

Answer 1

You'd generally accomplish this by doing a preflight request to the server via fetch.

Send the field value(s) over whenever you do validation (e.g. on change or on blur) and have the server report back any issues (e.g. "Name already taken").

Answer 2

Implement some checking logic In the POST request. Before you write the logic to add the user to the database, check If a user with that username already exists, and If It does, return an error. It also depends on the database you are using how they handle searching for documents.

If its MongoDB you need to use the .find() method and find by username. If you find a matching username, return an error saying to enter a unique username.