How can I verify email uniqueness and associated value in a database without form submission?

Frontend
1

I’m working on a sign-up page and need to check if an email address already exists in my PostgreSQL database before the user submits the form. I want to do this using only vanilla JavaScript or jQuery, not PHP. Here’s what I’m trying to achieve:

  1. User types in their email
  2. JavaScript checks the database in real-time
  3. If the email exists, it should also fetch a related value

Is there a way to do this without sending the entire form? I’m new to front-end development and could use some guidance on the best approach. Any code examples or explanations would be really helpful!

// Example of what I'm thinking (not working code)
function checkEmail(email) {
  // Some AJAX call to database?
  // Return true if email exists, false otherwise
}

document.getElementById('emailInput').addEventListener('blur', function() {
  let email = this.value;
  if (checkEmail(email)) {
    alert('Email already exists!');
  }
});

Thanks in advance for any help!

2

To accomplish this without form submission, you’ll need to implement an API endpoint on your server that handles email verification. Here’s a more detailed approach:

  1. Create a REST API endpoint (e.g., ‘/api/verify-email’) that accepts GET requests with the email as a parameter.

  2. In your JavaScript, use the Fetch API to make an asynchronous call to this endpoint when the email input loses focus or after a short delay while typing.

  3. Your server-side code should query the PostgreSQL database and return a JSON response indicating whether the email exists and any associated value.

  4. Handle the response in your JavaScript to update the UI accordingly.

This method keeps your database logic server-side while allowing real-time verification without full form submission. Remember to implement proper security measures to prevent abuse of this endpoint.

3

yo, have u tried using axios for this? it’s pretty sweet for ajax stuff. u could do something like:

axios.get('/api/check-email', { params: { email: email } })
  .then(response => {
    if (response.data.exists) {
      // do something
    }
  })
  .catch(error => console.error('oops', error));

just make sure ur backend can handle it. good luck!

4

hey there! have you considered using an API endpoint for this? you could set up a simple GET request that checks the email against your database. it’d be something like:

fetch('/api/check-email?email=' + email)
  .then(response => response.json())
  .then(data => {
    if (data.exists) {
      console.log('Email exists!', data.relatedValue);
    }
  });

what do you think? this way, you don’t need to submit the whole form. curious to hear your thoughts!