Question

我无法通过简单的联系表单进行验证，并且不确定我做错了什么，我几乎完全脱离了一个独立的演示代码并跟随了tut。我的代码出了什么问题？

在头部： 更新后的尝试

<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

你有几个问题：

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

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

确定要使用的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>
```

确保以正确的顺序加载脚本（jQuery，然后是jQuery 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看起来还不错。

让validate.js工作

1 个答案: