jQuery Javascript 来验证表单答案

【问题标题】：jQuery Javascript to validate FormjQuery Javascript 来验证表单
【发布时间】：2023-04-09 11:45:02
【问题描述】：

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

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

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

如果我从“查看源代码”中复制完全相同的代码，我怎么能得到不同的结果？知道我做错了什么吗？是不是还有更多“查看源码”代码中没有显示的代码？

编辑

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

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

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

【问题讨论】：

没有代码或错误消息或任何类似的东西，真的无法预测问题可能是什么。
您可能遗漏了 CSS。
您可能忘记获取所需的css 和js 文件
@leko 超链接都很好，但是超链接可能会中断。您应该始终在您的问题中发布您的代码。
你也下载了 jquery.validate.js 文件吗？

标签： javascript jquery forms

【解决方案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 或本地路径。如果教程网站使用本地路径包含脚本，则目标脚本本地存储在他们的网站上。

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

第二个：AJAX (Javascript)

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

【讨论】：

哦，天哪，我错过了 jquery.validate.js 文件，感谢您的帮助 Juhana 和 Archangel ...我现在将继续用头撞墙....
嗯是我的原始帖子编辑中的第一个代码块，实际上是 jquery.validate.js 文件或其他文件？
不，我认为不是，您可以通过打开源代码并单击标签。
宾果游戏！是的，我使用了ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/…，现在可以使用了！！谢谢你的帮助！！
没问题，很高兴能帮到你！

【解决方案2】：

您可以通过使用html5标签来实现这一点，

对于电子邮件字段：

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

你也可以试试这个：

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

【讨论】：