Question

此tutorial生成此signup form以验证电子邮件字段并显示自定义确认消息，而不是Google表单的默认消息。

我想复制教程，但我得不到相同的结果。

在该注册表单页面上，我右键单击并点击＆＃34;查看源＆＃34;。我复制了源代码并粘贴到我的wordpress网站的空index.php中，但我没有得到相同的结果。如果字段未填写，则电子邮件字段应变为红色，但我的注册表单不会产生红色字段。

如果我真的从＆＃34;查看源代码＆＃34;中复制相同的代码，我怎么能有不同的结果？知道我做错了什么吗？是否有更多代码未显示在＆＃34;视图源＆＃34;码？

修改

＆＃13;

$(document).ready(function() {
  $("#emailSubscription").validate({
    ignore: ".ignore",
    rules: {
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      $('#emailSubscription').toggle();
      form.submit();
      $('.hidden-message').show();
    }
  });
  
  var submitted = false;
});

＆＃13;

html,
body {
  color: #3d5e60;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
.my-google-form {
  max-width: 500px;
  width: 80%;
  margin: 0 auto;
  padding: 50px;
  text-align: center;
  border: 1px solid #333;
  box-sizing: border-box;
  background: #61787a;
  /* Old browsers */
  background: -moz-linear-gradient(top, #EFEFEF 0%, #BABABA 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EFEFEF), color-stop(100%, #BABABA));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #EFEFEF 0%, #BABABA 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #EFEFEF 0%, #BABABA 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #EFEFEF 0%, #BABABA 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #EFEFEF 0%, #BABABA 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#EFEFEF', endColorstr='#BABABA', GradientType=0);
  /* IE6-9 */
}
input {
  color: #666;
  font-size: 1.5em;
}
.input-wrapper {
  display: block;
  width: 100%;
  position: relative;
}
.input-wrapper input.ss-q-short {
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 5px;
  border: 1px solid #666;
  box-sizing: border-box;
}
.submit-button {
  position: relative;
  width: 100%;
  padding: 10px;
  font-size: 1.5em;
  color: #EFEFEF;
  text-transform: uppercase;
  background: #61787a;
  /* Old browsers */
  background: -moz-linear-gradient(top, #61787a 0%, #3d5e60 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #61787a), color-stop(100%, #3d5e60));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #61787a 0%, #3d5e60 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #61787a 0%, #3d5e60 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #61787a 0%, #3d5e60 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #61787a 0%, #3d5e60 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#61787a', endColorstr='#3d5e60', GradientType=0);
  /* IE6-9 */
  border: 0px;
  box-sizing: border-box;
}
.input-wrapper input.error {
  border: 1px solid #990000;
  background: #ffcccc;
  color: #990000;
}
.input-wrapper label.error {
  display: block;
  color: #990000;
  font-style: italic;
  font-size: 1.25em;
  position: absolute;
  width: 100%;
}
.input-wrapper .error-message {
  display: none;
}
.hidden-message {
  position: relative;
  font-size: 1.5em;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js" type="text/javascript"></script>
<div class="my-google-form">
  <form action="https://docs.google.com/forms/d/1MoRmfek0fJjT1THfKWZqhmAt3YaCXvMML7CLhGbg7fc/formResponse" method="POST" id="emailSubscription" target="hidden_iframe" onsubmit="submitted=true;">
    <div class="ss-form-question errorbox-good" role="listitem">
      <div dir="ltr" class="ss-item ss-item-required ss-text">
        <div class="ss-form-entry">
          <label class="ss-q-item-label" for="entry_251567901">
            <h1 class="ss-q-title">Subscribe to our newsletter</h1> 
            <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
          </label>
          <div class="ss-item ss-navigate input-wrapper">
            <input placeholder="Name is not necessary but nice" type="text" name="entry.1542678317" value="" class="ignore ss-q-short" id="entry_1542678317" dir="auto" aria-label="Name  " title="">
            <input placeholder="Enter your email address" type="email" name="entry.251567901" value="" class="ss-q-short required" id="entry_251567901" dir="auto" aria-label="subscribe to our newsletter  Must be a valid email address" aria-required="true"
            required title="Must be a valid email address" aria-invalid="true">
            <input type="Submit" name="ss-submit" value="Submit" id="ss-submit" class="submit-button">
          </div>
        </div>
      </div>
    </div>
    <input type="hidden" name="draftResponse" value="[,,&quot;-8281247560927290473&quot;]
">
    <input type="hidden" name="pageHistory" value="0">
    <input type="hidden" name="fbzx" value="-8281247560927290473">
  </form>
  <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {}"></iframe>
  <div class="hidden-message" style="display: none;">Thanks! Look out for our weekly newsletter.
    <br /> <small> View your response <a href="https://docs.google.com/spreadsheets/d/1r0bEV5sTlY7PQWLREE0W5Chuy6LSkrPtVCBEHmHzMhI/edit?usp=sharing" target="_blank">here.</a> </small> 
  </div>
</div>

＆＃13;

Answer 1

至少有两个可能的原因导致你没有得到相同的结果。

首先：HTML

使用HTML，您可以包含以下脚本（.js）：

<script src="some/local/path/to/my/script/file.js" type="text/javascript"></script>

或

<script src="//example.com/path/to/remote/script/file.js"></script>

还有样式表（.css）：

<link rel="stylesheet" type="text/css" href="some/local/path/to/my/stylesheet/file.css">

或

<link rel="stylesheet" type="text/css" href="//example.com/path/to/remote/stylesheet/file.css">

指定路径可以是URL或本地路径。如果tutoral网站使用本地路径来包含脚本，则目标脚本本地存储在其网站上。

因此，当您复制粘贴源时，您的服务器可能会尝试获取计算机上的本地资源，但不能像在教程站点上那样。

第二：AJAX（Javascript）

在JavaScript中，您可以向服务器发出AJAX请求，以动态获取某些数据。除其他外，它可能是一些Javascript脚本或一些HTML内容。

Answer 2

您可以使用html5标记

来实现此目的

用于电子邮件字段：

  <input type="email" name="email" required placeholder="Enter a valid email address">

你也可以试试这个：

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

jQuery Javascript验证表单

2 个答案:

首先：HTML

第二：AJAX（Javascript）