Home/ Questions/Q 7753443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T12:03:55+00:00

Ok it does work in PHP but if I modify the file so that

  • 0

Ok it does work in PHP but if I modify the file so that my index.php looks like this

<?php

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

?>

then it does not work.

Here is my rendered 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>

What could be wrong? I know the query validation does not work if it is not the first include. But it is the first include in the headers. And rendered HTML looks fine. The file are in the js folder.

I have spend a couple of hours on this.

This code works

This is rendered code of another html page that does works. jQuery won’t submit the form if validation fails.

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have included jquery twice, remove the last one.

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

    Also, you may want to use the “id” property on your form fields in addition to name. Name is passed to the server, while id is normally used with javascript.

    And move your last script inside the body tag or head tag.

    • 0