Answers.Body: <p>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.</p>
  <blockquote>
  <p>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.</p>
  </blockquote>
  <p>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?</p>
  <p>Make sure to follow the article on <a href="https://craftcms.com/knowledge-base/front-end-user-accounts#registration-form" rel="nofollow noreferrer">Front-End User Accounts</a> 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:</p>
  <pre class="lang-twig prettyprint-override"><code>{{ user ? _self.errorList(user.getErrors('email')) }}
  </code></pre>
  <p>To clarify how this works: In case of an error with a public registration, the <code>users/save-user</code> controller will provide the <code>user</code> variable (which is a <a href="https://docs.craftcms.com/api/v3/craft-elements-user.html" rel="nofollow noreferrer">User model</a>) 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, <code>user.getErrors('email')</code> will return an appropriate error message (as an array with one or more elements).</p>
  <p>Now you also understand how this part works:</p>
  <pre class="lang-twig prettyprint-override"><code>user.email ?? null
  </code></pre>
  <p>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.</p>
  <hr />
  <p>If you really, <em>really</em> want the behaviour you described (check for a duplicate email as soon as it's entered), you can do it like this:</p>
  <ol>
  <li>Create a <a href="https://craftcms.com/docs/3.x/extend/controllers.html" rel="nofollow noreferrer">controller action</a> that takes an email parameter and returns a response indicating if there's an account for that email or not.</li>
  <li>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 <code>onblur</code> event (so the email is validated after the visitor switches to the next field).</li>
  <li>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 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation" rel="nofollow noreferrer">constraint validation</a> to add an error to the email field so the form can't be submitted.</li>
  <li>Repeat for new inputs, make sure to clear any error states as soon as a valid email is entered.</li>
  </ol>
  <p>Use this approach as <strong>progressive enhancement</strong> 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.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-12-16T10:05:34.597Z
Answers.Text: Thank you @MortizLost , the answer was super helpful.
Answers.UserDisplayName: Ra3d K
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-12-13T11:15:46.507Z
Answers.LastActivityDate: 2021-12-13T11:15:46.507Z
Answers.UserDisplayName: MoritzLost
Body: <p>I have a signup form on my site and I want to check if the <strong>entered input (email)</strong> is already used in my DB before submitting the form.</p>
  <p>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 (<strong>same</strong>) email, the form obviously won't submit successfully and reload the page with a console error.</p>
  <p>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?</p>
  <p>are there any twig extension/functions I can use in my templates?</p>
  <p>or should I create a Module to do this?</p>
  
Tags: <users><emails><registration><frontend-form>
Title: how to check if a user email exists before creating a new user on a frontend form?
ThreadText: # how to check if a user email exists before creating a new user on a frontend form?
  
  (Asked by: username_0 on 2021-12-13)
  
  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?
  
  **Tags:** users, emails, registration, frontend-form
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-12-13. Score: 3 | Accepted answer
  
  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](https://craftcms.com/knowledge-base/front-end-user-accounts#registration-form) 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:
  
  ```twig
  {{ 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](https://docs.craftcms.com/api/v3/craft-elements-user.html)) 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:
  
  ```twig
  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](https://craftcms.com/docs/3.x/extend/controllers.html) 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](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/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.
  
  > **Comments:**
  > **username_0**: Thank you @MortizLost , the answer was super helpful.  
  
  ---
  
  