2

I have a signup form on my site and I want to check if the entered input (email) is already used in my DB before submitting the form.

What's happening now is when I create a new user with a new email address it all works like charms, but when I try to create a new user with the (same) email, the form obviously won't submit successfully and reload the page with a console error.

how can I check if an email exists before submitting and give the user a hint to try another email or log in with the current email?

are there any twig extension/functions I can use in my templates?

or should I create a Module to do this?

1 Answer 1

3

There are ways to check the email as soon as it's entered, but it's a bit more involved. The built-in controller action to create new users already does this check for you, so you should see if you can't utilize this to achieve good UX.

when I try to create a new user with the (same) email, the form obviously won't submit successfully and reload the page with a console error.

This indicates there's something wrong with your registration form. A 4xx HTTP response shouldn't result in a console error. What kind of error are you seeing?

Make sure to follow the article on Front-End User Accounts in the knowledge base. You'll see that the example code for the registration code includes some code to display error messages for every field:

{{ user ? _self.errorList(user.getErrors('email')) }}

To clarify how this works: In case of an error with a public registration, the users/save-user controller will provide the user variable (which is a User model) to the template. That model includes the form values submitted by the user including any validation errors that occured. In case of a duplicate email, user.getErrors('email') will return an appropriate error message (as an array with one or more elements).

Now you also understand how this part works:

user.email ?? null

This allows the form to display the values the user entered after a failed validation. So by using the recommended template structure, you already get 90% of the behaviour you want – warning visitors that the an account for that email already exists and allowing them to use a different one.


If you really, really want the behaviour you described (check for a duplicate email as soon as it's entered), you can do it like this:

  1. Create a controller action that takes an email parameter and returns a response indicating if there's an account for that email or not.
  2. Use JavaScript to get a response from that endpoint as soon as an email is entered. You'll want to make sure to include some kind of debouncing or throttling for this, or only check during the onblur event (so the email is validated after the visitor switches to the next field).
  3. If the controller response indicates there's already an account for that email, visually mark the field as containing an error and display an appropriate error message. Use constraint validation to add an error to the email field so the form can't be submitted.
  4. Repeat for new inputs, make sure to clear any error states as soon as a valid email is entered.

Use this approach as progressive enhancement for the approach mentioned above. This ensures that visitors with JavaScript disabled (or JS failing to load for any reason) will still get a functional UX.

1
  • 1
    Thank you @MortizLost , the answer was super helpful.
    – Ra3d K
    Commented Dec 16, 2021 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.