让 validate.js 工作

Question

我在验证我的简单联系表单时遇到了麻烦，我不确定我做错了什么，我几乎完全从一个独立的演示中删除了代码，并遵循了 tut。我的代码有什么问题？

Tut & demo

在头脑中： 更新的尝试

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

开始，几乎就在结束之前 </head>

<script type="text/javascript">
  SubmittingForm=function() {
    alert("The form has been validated.");
  }

  $(document).ready(function() {
    $("#fvujq-form1").validate({
      submitHandler:function(form) {
        SubmittingForm();
      },
      rules: {
        name: "required", // simple rule, converted to {required:true}
        email: {          // compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
      },
      messages: {
        comment: "Please enter a comment."
      }
    });
  });

  jQuery.validator.addMethod(
    "selectNone",
    function(value, element) {
      if (element.value == "none") {
        return false;
      }
      else return true;
    },
    "Please select an option."
  );

  $(document).ready(function() {
    $("#fvujq-form2").validate({
      submitHandler:function(form) {
        SubmittingForm();
      },
      rules: {
        sport: {
          selectNone: true
        }
      }
    });
  });
</script>

靠近页面底部，表单标记：

<p style="font-style:italic; font-size:12px; font-weigh: normal; margin-top: -89px;     margin-left: 33px;">Contact me written in a different language.</p> <img src="http://www.cameroncashwell.com/imgs/pointing-left.png" style="float: right; margin-right: 140px; margin-top: -89px;">

<div class="form-div"> 
    <form id="fvujq-form1" style="font-size:22px; color:#333;" method="post" action="">
      <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
      <div class="form-row"><span class="label">Your Comment *</span><textarea name="comment"></textarea></div>
      <div class="form-row"><input class="submit" type="submit" value="Submit"></div>
    </form>
</div>

另外 - 我应该在哪里拨打我的电子邮件地址以发送联系表单的内容？

Answer 1

你有几个问题：

1. 您的验证插件链接已损坏。尝试使用 CDN（如 Microsoft）中的一个：

   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
   

2. 决定你想使用哪个版本的 jQuery。现在，您正在加载 1.3.2（相当旧的版本）和最新版本（1.7.1）。除非您有特定的理由不这样做，否则我会坚持使用最新版本。在这里使用 CDN 也很聪明：

   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
   

3. 确保以正确的顺序加载脚本（jQuery，然后是 jQuery Validate）。如果你把 validate 放在 jQuery 之前，你的 validate 代码将不起作用：

   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
   

除了这些问题，您的实际 JavaScript 看起来不错。