Question

我创建了一个产品页面，在两个不同的地方，人们可以输入他们的电子邮件。如果他们输入格式正确的电子邮件，我希望他们获得验证消息，如果他们输入了错误格式的电子邮件，我希望他们收到错误消息。

我的教授让我们连接到他在Ruby On Rails中构建的数据库，它为我们验证了这一点，并且已经成功连接到了，但是我们需要使用JavaScript来设置屏幕上显示的错误和验证消息为用户。出于某种原因，我似乎无法让他们通过，我想知道是否有人有任何关于我搞砸的建议。

我的教授说，如果我们遇到困难，可以在这里寻求帮助，但我确实遇到了困难。我已经玩了好几个小时的选择，似乎无法解决任何问题。非常感谢任何帮助，谢谢！

当您提交格式错误的电子邮件时，它应该是这样的：

当您提交格式错误的电子邮件时，会发生这种情况（根本没有任何内容）：

当您提交格式正确的电子邮件时，它应该是这样的：

当您提交格式正确的电子邮件时，会发生这种情况（根本没有任何内容）：

当我点击按钮时，这就是console.log中发生的事情。

＆＃13;

$(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();
    });    
});

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

两点：

1）您在代码中指定的API端点（https://web2-product-page/herokuapp.com/subscribers）返回404未找到，因此您永远不会得到它的响应。
我相信你误会了什么 .done（）和.fail（）方法适用于 - 这些方法不会响应通过或失败的电子邮件验证，而是响应对服务器的通过/失败请求。在您的代码中，因为服务器返回404，所以将始终调用fail（）。由于响应失败，因此没有要使用的data.responseText 我会使用更像下面的内容（假设当服务器存在时，它返回data.validEmail来表示电子邮件的有效性（您的实际服务器可能使用不同的东西）。

$.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）虽然这是通过AJAX与远程服务器通信的有效学习练习，但实际上验证电子邮件的最简单方法是在输入中使用HTML5类型属性。

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

现在，浏览器将为您完成艰苦的工作，提供验证消息并阻止表单提交，除非它有效。

编辑：如果您向API发布有效的电子邮件，则会返回一个JSON对象，其中包含已保存的电子邮件的详细信息以及“201 Created”状态，您可以按如下方式对其进行测试：

$.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.");                
        });

如何使用Javascript进行验证和错误消息？

1 个答案: