jQuery Javascript 来验证表单

Question

本教程生成此注册表单以验证电子邮件字段并显示自定义确认消息而不是 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>

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 或本地路径。 如果教程站点使用本地路径来包含脚本，则目标脚本将本地存储在其站点上。

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

第二个：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/