Alison Dyer Alison Dyer - 5 days ago 5
Ajax Question

Only The Validation Message Is Returning, Not The Error Message

I am working on a product page exercise. For the product page if a user puts in a correctly formatted e-mail, they get a validation message. If they put in an incorrectly formatted e-mail, they're supposed to get an error message.

The product page's input is connected to something my professor made in Ruby on Rails that automatically validates whether it's properly formatted or not. I've successfully managed to make it so that when a user puts in a correctly formatted e-mail that a validation message comes up, but I've been able to get the same result for the error message.

This is how it's supposed to look when someone puts in an incorrectly formatted e-mail:

enter image description here

This is how it looks when someone puts in an incorrectly formatted e-mail:

enter image description here

This is the error I get in the console.log when I put in an incorrectly formatted e-mail:

enter image description here

Why is my javascript only working for my validation message and not my error message? What am I doing incorrectly? From my understanding I have the error message set up to respond to a failure from the server, why isn't it coming up?



$(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;
float: left;
}
#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;
padding-top: 10px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 400px;
}
#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: 5px;
}
#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;
height: 140px;
width: 140px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 400px;
}
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

The site is connected to a Ruby On Rails server. The server automatically responds with "Invalid E-mail Address" when an incorrectly formatted e-mail is put in, but not a validation message.

I had incorrectly assumed the server responded with neither a validation or error message, and that I needed to create responses for both, and hide both initially and make it so that the javascript changed depending on the user input. Hence, this process only worked for the validation message, but not the error message. Once I removed "display:none" from the CSS of the .error-message class, the problem was immediately resolved!

$(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: 532px;
  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; 
}
.confirmation {
  display: none;
  height: 0px;
}
#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;
  margin-bottom: 3px;
}
.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;
}
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;
}
textarea:focus, input:focus {
  color: #62CE9C;
}
#tweetone {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 35px;
  padding-right: 25px;
  padding-top: 30px;
  width: 620px;
}
#tweetone img {
  float: left;
  height: 140px;
  margin-top: 6px;
  width: 140px;
}
#tweetonetext {
  float: left;
  margin-left: 15px;
  margin-top: 8px;
  padding-left: 15px;
  width: 400px;
}
#tweettwo {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 35px;
  padding-right: 25px;
  padding-top: 30px;
  width: 620px;
}
#tweettwo img {
  float: left;
  height: 140px;
  margin-top: 6px;
  width: 140px;
}
#tweettwotext {
  float: left;
  margin-left: 15px;
  margin-top: 8px;
  padding-left: 15px;
  width: 400px;
}
#tweetthree {
  background-color: #FFFFFF;
  border-radius: 25px;
  height: 208px;
  margin: auto;
  margin-top: 60px;
  padding-bottom: 30px;
  padding-left: 35px;
  padding-right: 25px;
  padding-top: 30px;
  width: 620px;
}
#tweetthree img {
  float: left;
  height: 140px;
  margin-top: 6px;
  width: 140px;
}
#tweetthreetext {
  float: left;
  margin-left: 15px;
  margin-top: 8px;
  padding-left: 15px;
  width: 400px;
}
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>
    <script type="text/javascript" src="javascripts/modernizr.foundation.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"></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.jpg"/>
            <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.jpg"/>
            <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.jpg"/>
            <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"></p>
      </form>
    </div>
  </body>
</html>