我在将jquery表单验证脚本实现到我的联系我们表单时遇到了一些问题。这是表单的HTML代码和javascript表单验证，我在这里使用Jquery验证1.13.1 [url] http://jqueryvalidation.org/[/url]，当我点击提交按钮时没有任何反应，它甚至没有显示验证消息喜欢它。目前表单有点粗糙，但我现在想要实现的只是表单验证。如果有人可以帮忙，我将不胜感激。感谢
<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><li style="list-style-type: none;">About us</li>
<li style="list-style-type: none;">Careers</li></a>
<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>
</body>
</html>
答案 0 :(得分：1)
首先：请清理你的代码！所有内联样式都很难确定什么是重要的。除其他外，你似乎在一个选择中有一个选择（但你只关闭其中一个）：
<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>
然后其他问题包括您正在验证您尚未定义任何规则的表单（ID = commentForm）：
$("#commentForm").validate();
因此表格不知道哪些字段是必需的。 （确定了具有ID＆＃34; signupForm＆＃34;的表单的规则，但根本没有这样的表单出现在您的代码中......）
我已经清理了一些HTML代码（只是表单）：
<form class="cmxform" id="commentForm" method="get" action="">
<p>First Name</p>
<input type="text" id="firstname" name="firstname" value="" />
<p>Last Name</p>
<input type="text" id="Editbox2" name="lastname" value="" />
<p>Email</p>
<input type="text" id="Editbox3" name="email" value="" />
<p>Telephone number</p>
<input type="text" id="Editbox4" name="telephone" value="" />
<p>What is your question or topic regarding?*</p>
<select id="topic" name="topic" title="Please select a topic">
<option></option>
<option>topic1</option>
<option>topic2</option>
<option>topic3</option>
</select>
<p>Please tell us what's on your mind:*</p>
<textarea name="onyourmind" id="TextArea1" rows="6" cols="29"></textarea>
<input type="submit" id="submit" name="Button1" value="Submit" />
</form>
然后关于脚本，在＆＃34;规则＆＃34; （见下文）您需要使用表单元素的名称（而不是ID或其他内容）：
$("#commentForm").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
telephone: "required",
topic: {
required: true
},
onyourmind: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
email: "Please enter a valid email address",
telephone: "Please enter your phone number",
topic: "Please choose a topic",
onyourmind: "Please tell us what's on your mind"
}
});
});
（当然＆＃34;规则＆＃34;可以而且应该调整，具体取决于提交表单所需的表单元素。）
这是一个包含上述代码的小提琴：http://jsfiddle.net/Niffler/n7750jkt/
在这里我不会更改您的HTML代码（错误选择除外）：http://jsfiddle.net/Niffler/xt6jaaen/