input validation from server to client side

Question

I am making a basic website with login screens etc.

At the moment I am working on my signup page which has very little in terms of validation to the user eg "email exists" , "confirmation email sent" etc.

what is the best approach to implement this or your personal preference ?

Below I have included my code with examples of how I was trying to implement this.

I have basic logging to the console from my server side as the below code snippet contains.

app.post("/register-email", async (req, response) => {
  let emailAvailabilitylResponse = "";
  var Email = req.body.email;
  await sql.connect(config);
  var request = new sql.Request();

  request.input("Email", sql.VarChar, Email);
  const result = await request.execute("dbo.CheckEmailExists");

  if (result.recordsets[0].length > 0) {
    emailAvailabilitylResponse = "This email already exists"; // this works on console
    console.info(emailAvailabilitylResponse);
    console.log(req.body);
  } else {
    console.log({ Email });
    emailAvailabilitylResponse = "An email has been sent to your inbox"; //this work on console
console.info(emailAvailabilitylResponse);

    const token = jwt.sign({ user: Email }, "register-email", {
      expiresIn: 3600000
    });

    response.status(200).json({
      ok: true,
      user: Email,
      jwt: token,
      emailAvailability: emailAvailabilityResponse
    });

I have tried to pass this information back through within my json file however when trying to display this to user it still does not work.

This is my client side of the code. This is a handle submit which is triggered once the button of the register form is clicked.

  handleSubmit(e) {
    e.preventDefault();
    const EmailAvailbiltly = "";

    if (this.state.email.length < 8) {
      alert(`please enter email correctly `);   //this works and displays as alert
    } else {
      const data = { email: this.state.email };
      console.log(data);

      fetch("/register-email", {
        method: "POST", // or 'PUT'
        headers: {
          Accept: "application/json,",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => {
          console.log("response before it is broken down " + response);

          return response.json();
        })
        .then(({ jwt, user, emailAvailabilityResponse }) => {
          console.log(
            "After it is broken down",
            jwt,
            user,
            emailAvailabilityResponse
          );
          EmailAvailbiltly = emailAvailabilityResponse;
        });

      alert(`"reponse 2" ${EmailAvailbiltly}`);         // I cannot get the an alert with this response. 
      console.log(EmailAvailbiltly);                    //This should be  the messages contained in                                                   
                                                        //server.js 
      console.log(`"reponse 2" ${EmailAvailbiltly}`);
    }
  }

EDIT

As Requested console info

If email exists

[0] Server running on port 5000
[0] This email already exists
[0] { email: 'testuser@gmail.com' }

If email does not exists

[0] { Email: 'testing@gmail.com' }
[0] An email has been sent to your inbox

but this is purely console whilst I want it to front end

Answer 1

To solve this I created an error message within the two if statements and passed it back through with my json. After that I just called the error message from my front end.

pseudo code

error message 

if(a statement)
error message = "whatever it needs to be"
res.sendjson(with error message)

else(a statement)
error message = "something different"
res.sendjson(with error message)

Then in my client side I just pulled out the error message and simply put it into an alert.

I hope this helps someone :)