我在将jquery表单验证脚本实现到我的联系我们表单时遇到了一些问题。这是表单的HTML代码和javascript表单验证,我在这里使用Jquery验证1.13.1 http://jqueryvalidation.org/,当我点击提交按钮时没有任何反应,它甚至没有显示验证消息应该。
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>contact us</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/png"/>
<link href="style/global.css" rel="stylesheet" type="text/css" />
<link href="style/default/layout.css" rel="stylesheet" type="text/css" />
<link href="style/default/home.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/screen.css">
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="js/gcws.js"></script>
<script language="javascript" type="text/javascript" src="js/flashobject.js"></script>
<script language="javascript" type="text/javascript" src="js/default/home.js"></script>
<script language="javascript" type="text/javascript" src="js/customTracking.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if (firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<style type="text/css">
div#container
{
width: 800px;
height: 1200px;
margin-top: 0px;
margin-left: 0px;
text-align: left;
}
</style>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
a:active
{
color: #0000FF;
}
a:hover
{
color: #E49282;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
img { behavior: url("pngfix.htc"); }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<form class="cmxform" id="commentForm" method="get" action="">
<div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:97px; width:969px; height:853px; text-align:left; z-index:1;">
<img src="images/bg2_01.jpg" alt="" width="817" border="0" align="top" id="" style="width:969px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:950px; width:969px; height:256px; text-align:left; z-index:2;">
<img src="images/bv01003_01_01_01.png" id="" alt="" align="top" border="0" style="width:969px;height:245px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1196px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1247px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1299px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1352px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1407px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:494px; top:97px; width:197px; height:853px; text-align:left; z-index:10;">
<img src="images/leftbar.jpg" id="" alt="" align="top" border="0" style="width:197px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:501px; top:116px; width:132px; height:130px; text-align:left; z-index:32;">
<h1>Quick links</h1>
<h3>About us</li>
<li style="list-style-type: none;">Careers</li>
<li style="list-style-type: none;">Mission Statement</li>
</h3></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:708px; top:113px; width:695px; height:827px; text-align:left; z-index:13;">
<h1><b>Contact Us</b></h1><br>
<h3><br>
<p>
<b>General Enquiry</b>: <br>
<b>Help</b>
:<br>
<b>Request quote</b>
: <br>
</h3>
<input type="text" id="firstname" style="position:absolute; left:10px; top:258px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:2" name="firstname" value="">
<div id="bv_Text2" style="margin:0; padding:0; position:absolute; left:10px; top:238px; width:71px; height:16px; text-align:left; z-index:3;">
<font style="font-size:13px" color="#000000" face="Arial">First Name</font></div>
<input type="text" id="Editbox2" style="position:absolute; left:10px; top:311px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:4" name="Lastname" value="">
<div id="bv_Text3" style="margin:0; padding:0; position:absolute; left:10px; top:287px; width:71px; height:16px; text-align:left; z-index:5;">
<font style="font-size:13px" color="#000000" face="Arial">Last Name</font></div>
<div id="bv_Text4" style="margin:0; padding:0; position:absolute; left:10px; top:342px; width:71px; height:16px; text-align:left; z-index:6;">
<font style="font-size:13px" color="#000000" face="Arial">Email</font></div>
<input type="text" id="Editbox3" style="position:absolute; left:10px; top:362px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:7" name="Email" value="">
<div id="bv_Text5" style="margin:0; padding:0; position:absolute; left:10px; top:397px; width:158px; height:16px; text-align:left; z-index:8;">
<font style="font-size:13px" color="#000000" face="Arial">Telephone number</font></div>
<input type="text" id="Editbox4" style="position:absolute; left:10px; top:419px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:9" name="Telephone" value="">
<div id="bv_Text6" style="margin:0; padding:0; position:absolute; left:10px; top:452px; width:254px; height:16px; text-align:left; z-index:10;">
<font style="font-size:13px" color="#000000" face="Arial">What is your question or topic regarding?*</font></div>
<div style="position:absolute; left:10px; top:475px; width:270px; height:24px; border:1px #C0C0C0 solid; z-index:11">
<select name="Combobox1" size="1" id="Combobox1" style="width:100%; height:100%; border-width:0px; font-family:'Calibri'; font-size:10px;">
<select id="topic" name="topic" title="Please select a topic" required>
<option></option>
<option>topic1</option>
<option>topic2</option>
<option>topic3</option>
</select>
</div>
<textarea name="TextArea1" id="TextArea1" style="position:absolute; left:10px; top:530px; width:271px; height:148px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:12" rows="6" cols="29"></textarea>
<div id="bv_Text7" style="margin:0; padding:0; position:absolute; left:10px; top:505px; width:254px; height:16px; text-align:left; z-index:13;">
<font style="font-size:13px" color="#000000" face="Arial">Please tell us what's on your mind:*</font></div>
<input type="submit" id="submit" name="Button1" value="Submit" style="position:absolute; left:208px; top:700px; width:75px; height:24px; font-family:Arial; font-size:13px; z-index:14">
</form>
</div>
<hr noshade="noshade" id="Line1" style="color:#666666; background-color:#333333; border:0px; margin:0; padding:0; position:absolute; left:495px; top:995px; width:966px; height:1px; z-index:39">
<div id="bv_" style="margin:0; padding:0; position:absolute; left:501px; top:1000px; width:142px; height:130px; text-align:left; z-index:32;">
<h3><font color="#666666"><b>Company Information</b>
<li style="list-style-type: none;">footer links</li></a>
<li style="list-style-type: none;">footer links</li>
<li style="list-style-type: none;">footer links</li></a>
</font></h3></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:648px; top:1000px; width:142px; height:130px; text-align:left; z-index:32;">
<h3><font color="#666666"><b>footer links</b>
<li style="list-style-type: none;">footer links</li>
<li style="list-style-type: none;">footer links</li>
<li style="list-style-type: none;">footer links</li>
</font></h3></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:795px; top:1000px; width:142px; height:130px; text-align:left; z-index:32;">
<h3><font color="#666666"><b>Support</b>
<li style="list-style-type: none;">Contact us</li>
<li style="list-style-type: none;">F.A.Q</li>
<li style="list-style-type: none;">Site Navigation</li>
</font></h3></div>
<hr noshade="noshade" id="Line2" style="color:#666666; background-color:#333333; border:0px; margin:0; padding:0; position:absolute; left:495px; top:1164px; width:966px; height:1px; z-index:39">
<div id="bv_Text1" style="margin:0; padding:0; position:absolute; left:1172px; top:1165px; width:285px; height:15px; text-align:left; z-index:37;">
<h3><font color="#666666">Home|Site Map|Terms of Use|Security and Privacy</font></h3></div>
</body>
</html>