jquery验证在php中不起作用

时间:2012-04-08 19:46:33

标签: php jquery-validate

好吧它确实可以在PHP中运行,但是如果我修改文件以便我的index.php看起来像这样

<?php

include('header');
include('main_content');
include('footer');

?>

然后它不起作用。

这是我渲染的hmtl(firefox)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=MacRoman">
<title>This is a test page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script src="js/jquery.min.js" ></script>
<script src="js/main.js" ></script>
<LINK href="css/other1.css" rel="stylesheet" type="text/css">
<LINK href="css/other2.css" rel="stylesheet" type="text/css">
<LINK href="css/gallery.css" rel="stylesheet" type="text/css">
<LINK href="css/min_jquery.css" rel="stylesheet" type="text/css">
<LINK href="css/minified.css" rel="stylesheet" type="text/css">

</head>
    <body>

<!-- This is the form ---------->

<form id="form1" method="post" action="jquery_form.php">
      <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>

<!-- this is the jQuery validation ----------->

</div></div></body>

</html><script type="text/javascript">
    $(document).ready(function() {
      $("#form1").validate({
        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."
        },
        errorPlacement: function (error, element) {
                    element.css('background', '#ffdddd');
                }
      });
    $("#form2").validate({
    rules:{
        name2:"required",
        pass: "required"
    }
})
    });
  </script>

可能有什么不对?我知道如果查询验证不是第一个包含,则查询验证不起作用。但它是标题中的第一个包含。渲染的HTML看起来很好。该文件位于js文件夹中。

我已花了几个小时的时间。

此代码有效

这是另一个可行的html页面的代码。如果验证失败,jQuery将不会提交表单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>

  <style type="text/css">
    * { font-family: Verdana; font-size: 11px; line-height: 14px; }
    .submit { margin-left: 125px; margin-top: 10px;}
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
    .form-row { padding: 5px 0; clear: both; width: 700px; }
    label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
    input[type=text], textarea { width: 250px; float: left; }
    textarea { height: 50px; }
  </style>
  </head>
  <body>
    <form id="form1" method="post" action="jquery.php">
      <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>
<p>
<hr>

  </body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
      $("#form1").validate({
        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."
        },
        errorPlacement: function (error, element) {
                    element.css('background', '#ffdddd');
                }
      });
    $("#form2").validate({
    rules:{
        name2:"required",
        pass: "required"
    }
})
    });
  </script>

2 个答案:

答案 0 :(得分:1)

您已将jquery包括两次,删除最后一个。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript" src="js/jquery.validate.js"></script> 
<!--  <script src="js/jquery.min.js" ></script>  --/>

此外,除了名称之外,您可能还希望在表单字段中使用“id”属性。名称传递给服务器,而id通常与javascript一起使用。

将最后一个脚本移到body标签或head标签内。

答案 1 :(得分:0)

一个疯狂的猜测,但尝试在结束<script>标记之前移动</body>块。目前尚不清楚哪个include'd文件包含哪些内容,但在结束</body>标记后不应该出现任何内容。