Jquery表单验证的问题
我在将jquery表单验证脚本实现到我的contact us表单中时遇到一些问题。这是表单和javascript表单验证的HTML代码，我在这里使用的是Jquery validation 1.13.1，当我单击submit按钮时，什么都没有发生，它甚至没有显示应有的验证消息Jquery表单验证的问题,jquery,html,forms,validation,Jquery,Html,Forms,Validation,我在将jquery表单验证脚本实现到我的contact us表单中时遇到一些问题。这是表单和javascript表单验证的HTML代码，我在这里使用的是Jquery validation 1.13.1，当我单击submit按钮时，什么都没有发生，它甚至没有显示应有的验证消息 <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l
<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>
联系我们
$.validator.setDefaults({
submitHandler:function（）{
警报（“已提交！”）；
}
});
$（）.ready（函数（））{
//提交评论表单时验证该表单
$（“#commentForm”）.validate（）；
//在键盘上验证注册表格并提交
$（“#注册表”）.validate({
规则：{
名字：“必选”，
姓氏：“必需”，
用户名：{
要求：正确，
最小长度：2
},
密码：{
要求：正确，
最小长度：5
},
确认密码：{
要求：正确，
最小长度：5，
equalTo:“#密码”
},
电邮：{
要求：正确，
电子邮件：真的
},
主题：{
必填项：“#通讯：已选中”，
最小长度：2
},
同意：“必需”
},
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
用户名：{
必需：“请输入用户名”，
minlength：“您的用户名必须至少包含2个字符”
},
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为5个字符”
},
确认密码：{
必填：“请提供密码”，
minlength：“您的密码长度必须至少为5个字符”，
equalTo：“请输入与上述相同的密码”
},
电子邮件：“请输入有效的电子邮件地址”，
同意：“请接受我们的政策”
}
});
//通过组合名字和姓氏来建议用户名
$（“#用户名”）.focus（函数（）{
var firstname=$（“#firstname”）.val（）；
var lastname=$（“#lastname”）.val（）；
if（firstname&&lastname&&！this.value）{
this.value=firstname+“+”lastname；
}
});
//隐藏主题选择的代码，用于演示禁用
var时事通讯=$（“#时事通讯”）；
//时事通讯主题是可选的，请先隐藏
var inital=newsletter.is（“：checked”）；
var topics=$（“#时事通讯_topics”）[inital？“removeClass”：“addClass”]（“gray”）；
var topicInputs=topics.find（“input”）.attr（“disabled”，！inital）；
//查看时事通讯时显示
通讯。单击（函数（）{
主题[this.checked？“removeClass”：“addClass”]（“灰色”）；
topicInputs.attr（“禁用”！this.checked）；
});
});
分区#集装箱
{
宽度：800px；
高度：1200px；
边际上限：0px；
左边距：0px；
文本对齐：左对齐；
}
身体
{
背景色：#FFFFFF；
颜色：#000000；
}
a:主动的
{
颜色：#0000FF；
}
a:悬停
{
颜色：#E49282；
}
家
家
家
家
家
快速链接
关于我们
职业生涯
使命宣言
联系我们
一般查询：
帮助
：
请求报价
：
名字
姓
电子邮件
电话号码
你的问题或主题是什么*
主题1
专题2
专题3
请告诉我们您的想法：*
公司信息
页脚链接
页脚链接
页脚链接
页脚链接
页脚链接
页脚链接
页脚链接
支持
请与我们联系
F.A.Q.
站点导航
主页|网站地图|使用条款|安全和隐私