How Do I Make Validation and Error Messages Come Up Using Javascript?

Question

I created a product page, in two separate places people can input their e-mail. If they put in a properly formatted e-mail, I want them to get a validation message, if they put in a wrongly formatted e-mail, I want them to get an error message.

My professor is having us connect to a database he built in Ruby On Rails that verifies this for us, and that is already successfully connected to, but we need to use JavaScript to set up the error and validation messages that appear on screen for the user. For some reason I can't seem to get them to come through and I was wondering if anyone had any suggestions about where I'm messing up.

My professor said it's fine to look for help on here if we get stuck, and I've really gotten stuck. I've been playing with options for several hours and can't seem to figure anything out. Any help would be hugely appreciated, thank you!

This is what it's supposed to look like when you submit an incorrectly formatted e-mail:

This is what happens when you submit an incorrectly formatted e-mail (nothing comes up at all):

This is what it's supposed to look like when you submit a correctly formatted e-mail:

This is what happens when you submit a correctly formatted e-mail (nothing comes up at all):

This is what happens in the console.log when I click on the button.

$(document).ready(function() {
    
    $('form').submit(function(event) {

        var formData = $(this).serialize();
      
        $.ajax({
            type         : 'POST',
            url          : 'https://web2-product-page/herokuapp.com/subscribers', 
            data         : formData, 
            dataType     : 'json' 
        }).done(function(data) {

                console.log(data);
                $('.confirmation').fadeIn();
                $('.error-message').text("");
                $('input[name=email]').val("");
            }).fail(function(data) {
                console.log(data);
                var errorMessage = JSON.parse(data.responseText).email[0];
                $('.error-message').text(errorMessage);
                $('.confirmation').hide();
            });
    
        event.preventDefault();
    });    
});

* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'gilroysemibold';
    src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
         url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
  margin: 0px;
}
#calltoaction {
  background-image: url("calltoactionbackground.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  display: inline-block;
  height: 500px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  text-align: center;
  width: 100%;
}
#calltoaction p {
  margin: auto;
  padding-top: 25px;
  padding-bottom: 55px;
  width: 500px;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}
.confirmation {
  display: none;
}
.error-message {
  display: none;
}
#functions {
  background-color: #FFFFFF;
  display: block;
  height: 1080px;
  margin: auto;
  padding-top: 100px;
  width: 100%;
}
#functions p {
  color: #62CE9C;
}
h1 {
  color: #FFFFFF;
  font-family: 'gilroysemibold';
  font-size: 36px;
  font-weight: lighter;
}
h2 {
  color: #62CE9C;
  font-family: 'gilroysemibold';
  font-size: 30px;
  font-weight: lighter;
}
h3 {
  color: #00AF78;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 10px;
}
.hashtag {
  color:  #00AF78;
  font-weight: bold;
}
#hero {
  background-color: #62CE9C;
  height: 650px;
  margin: 0px;
  padding-bottom: 100px;
  padding-left: 120px;
  padding-right: 120px;
  padding-top: 100px;
  width: 100%;
}
#herocontent {
  margin: auto;
  width: 900px;
}
#herotext {
  float: left;
  width: 600px;
}
#hero h1 {
  width: 470px;
}
#hero img {
  display: block;
  float: right;
}
#hero p {
  padding-top: 30px;
  padding-bottom: 40px;
  width: 500px;
}
input, select, textarea{
  color: #62CE9C;
}

textarea:focus, input:focus {
  color: #62CE9C;
}
input::-webkit-input-placeholder {
  color: #62CE9C !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
  color: #62CE9C !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
  color: #62CE9C !important;  
}
 
input:-ms-input-placeholder {  
  color: #62CE9C !important;  
}
p {
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 18px;
  line-height: 26px;
}
#save {
  align-items: center;
  display: block;
  margin: auto;
  width: 800px;
}
#savefood {
  float: right;
  margin: auto;
}
#savefoodimage {
  float: right;
}
#savefoodtext {
  float: right;
  height: 300px;
  margin-right: 30px;
  padding-top: 30px;
  width: 290px; 
}
#savemoney {
  float: left;
  margin: auto;
}
#savemoneyimage {
  float: left;
}
#savemoneytext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#savetime {
  float: left;
  margin: auto;
}
#savetimeimage {
  float: left;
}
#savetimetext {
  float: left;
  height: 300px;
  margin-left: 30px;
  padding-top: 30px;
  width: 330px;
}
#searchbar {
  background-color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  height: 40px;
  padding-left: 15px;
  width: 300px;
}
#searchbutton {
  background-color: #28C787;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 18px;
  height: 40px;
  margin-left: 20px;
  width: 180px;
}
#searchbutton:hover {
  background-color: #00BE8B;
}
#tweetone {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetone img {
  float: left;
  height: 150px;
  padding-top: 10px;
  width: 150px;
}
#tweetonetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
#tweettwo {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweettwo img {
  float: left;
  padding-top: 10px;
}
#tweettwotext {
  float: left;
  padding-left: 15px;
  width: 400px;
}
#tweetthree {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 30px;
  width: 650px;
}
#tweetthree img {
  float: left;
  padding-top: 10px;
}
#tweetthreetext {
  float: left;
  padding-left: 15px;
  width: 450px;
}
ul {
  list-style-type: none;
}
#vocational {
  background-color: #62CE9C;
  display: inline-block;
  height: 1120px;
  padding-bottom: 100px;
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 100px;
  width: 100%;
}
#vocational h1 {
  margin: auto;
  text-align: center;
  margin-bottom: 0px;
  width: 500px;
}
#vocational p {
  color: #62CE9C;
  display: inline-block;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>
    <div class="container clearfix" id="hero">
      <div id="herocontent">
        <div id="herotext">
          <h1>Make the Most of your Food With Pantree</h1>
          <p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
          <form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
            <input id="searchbar" type="text" name="email" placeholder="yourname@email.com">
            <input id="searchbutton" type="submit" value="Get Early Access">
            <p class="confirmation">Thank you!</p>
            <p class="error-message">Incorrect E-mail Address.</p>
          </form>
        </div>
        <img src="images/phone.png"/>
      </div>  
    </div>
    <div id="functions">
      <div id=save>
        <div id="savemoney">
          <img id="savemoneyimage" src="images/savemoney.png"/>
          <div id="savemoneytext">
            <h2>Save Money</h2>
            <p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
          </div>
        </div>  
        <div id="savefood">
          <img id="savefoodimage" src="images/savefood.png"/>
          <div id="savefoodtext">
            <h2>Save Food</h2>
            <p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
          </div>
        </div>
        <div id="savetime">
          <img id="savetimeimage" src="images/savetime.png"/>
          <div id="savetimetext">
            <h2>Save Time</h2>
            <p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
          </div>
        </div>  
      </div>  
    </div>
    <div id="vocational">
      <h1>These Folks Could Use Pantree Every Day</h1>
      <ul>
        <li>
          <div id="tweetone">
            <img src="images/tweetone.png"/>
            <div id="tweetonetext">
              <h3>Kat</h3>
              <h3>@devicat</h3>
              <p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
            </div>          
          </div>  
        </li>
        <li>
          <div id="tweettwo">
            <img src="images/tweettwo.png"/>
            <div id="tweettwotext">
              <h3>Jack Falahee</h3>
              <h3>@RestingPlatypus</h3>
              <p>Dear Mom, How do I organize my kitchen? Love, me</p>
            </div>
          </div>
        </li>
        <li>
          <div id="tweetthree">
            <img src="images/tweetthree.png"/>
            <div id="tweetthreetext">
              <h3>mason ryan</h3>
              <h3>@MasonTheManiac</h3>
              <p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
            </div>  
          </div>  
        </li>
      </ul>
    </div>
    <div id="calltoaction">
      <h1>Manage your Kitchen, Effortlessly</h1>
      <p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
      <form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
        <input id="searchbar" type="text" name="email" placeholder="yourname@email.com">
        <input id="searchbutton" type="submit" value="Get Early Access">
        <p class="confirmation">Thank you!</p>
        <p class="error-message">Incorrect E-mail Address.</p>
      </form>
    </div>
  </body>
</html>

Answer 1

Two points:

1) The API endpoint you have specified in your code (https://web2-product-page/herokuapp.com/subscribers) returns 404 not found, so you are never going to get a response from it.
I believe you have misunderstood what the .done() and .fail() methods are for - these are not called in response to a pass or fail email validation, but in response to a pass/fail request to the server. In your code, because the server returns 404, fail() will always be called. Because the response has failed, there is no data.responseText to use.
I would use something more like the following (assuming that when the server exists it returns data.validEmail to represent email validity (your actual server probably uses something different).

$.ajax({
        type         : 'POST',
        url          : 'https://web2-product-page/herokuapp.com/subscribers', 
        data         : formData, 
        dataType     : 'json' 
    }).done(function(data) {

            if (data.validEmail) {
                $('.confirmation').fadeIn();
                $('.error-message').text("");
                $('input[name=email]').val("");
            } else {
                $('.error-message').text("Not a valid email address");
            }


        }).fail(function() {
            $('.error-message').text("The server did not respond.");                
        });

2) Although this is a valid learning exercise in communicating with a remote server via AJAX, in reality the easiest way to validate an email is to use the HTML5 type attribute on your input.

<input type="email" id="searchbar" name="email" placeholder="yourname@email.com">

Now the browser will do the hard work for you, provide a validation message and prevent form submission unless it is valid.

Edit: If you post a valid email to your API then it returns a JSON object with the details of the email it has saved, and a "201 Created" status, which you can test for as follows:

$.ajax({
        type         : 'POST',
        url          : 'https://web2-product-page/herokuapp.com/subscribers', 
        data         : formData, 
        dataType     : 'json' 
    }).done(function(data) {

            if (data.status === 201) {
                $('.confirmation').fadeIn();
                $('.error-message').text("");
                $('input[name=email]').val("");
            } else {
                $('.error-message').text(data.email);
            }


        }).fail(function() {
            $('.error-message').text("The server did not respond.");                
        });