jQuery 验证插件不起作用
Posted
技术标签:
【中文标题】jQuery 验证插件不起作用【英文标题】：jQuery Validate Plugin doesn't work 【发布时间】：2014-01-12 22:14:27 【问题描述】：我在测试页面上使用 jQuery 和 jQuery Validate Plugin，我的代码基于 validate demo
<html>
<head>
<script src="http://jquery.bassistance.de/validate/lib/jquery-1.9.0.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults(
submitHandler: function() alert("submited!!!");
);
$().ready(function()
$("#registerForm").validate(
rules :
username:
required: true,
minlength: 2
,
password:
required: true,
minlenght: 5
,
confirm_password:
required: true,
minlenght: 5,
equalTo: "#password"
,
email:
required: true,
email: true
,
messages :
username:
required: "Please enter a username",
minlenght: "Your username must consist at least 2 characters"
,
password:
required: "Please enter a password ",
minlenght: "Your password must consist at least 5 characters"
,
confirm_password:
required: "Please repeat the password",
minlenght: "Your password must consist at least 5 characters",
equalTo: "This password doesn't match with the original password"
,
email:
required: "Please enter a email",
email: "Invalid email"
);
);
</script>
<style type="text/css">
#commentForm width: 500px;
#commentForm label width: 250px;
#commentForm label.error, #commentForm input.submit margin-left: 253px;
#registerForm width: 670px;
#registerForm label.error
margin-left: 10px;
width: auto;
display: inline;
color: red;
#newsletter_topics label.error
display: none;
margin-left: 103px;
</style>
</head>
<body class="zoom: 1;">
<div id="main">
<form id="registerForm" method="post" action="" novalidate="novalidate">
<fieldset>
<legend>OLA MUNDO</legend>
<p><label for="username">Nome</label>
<input id="username" name="username" type="text" value=""></p>
<p><label for="email">E-mail</label>
<input id="email" name="email" type="email" value=""></p>
<p><label for="password">Password</label>
<input id="password" name="password" type="password" value=""></p>
<p><label for="confirm_password">Confirm Password</label>
<input id="confirm_password" name="confirm_password" type="password" value=""></p>
<p><input type="submit" class="submit" value="Enviar"></p>
</fieldset>
</form>
</div>
</fieldset>
</body>
问题是在我的页面中代码不起作用，我不知道为什么会发生。
我的脚本目录中有一个 jquery.js 文件，但该脚本未加载。 所以我使用了演示站点中的 jquery，我使用了托管在 google 上的 jquery，但这并没有解决问题。我不知道问题是否出在脚本代码上，因为我是 javascript 的新手。
@编辑
我解决了问题，但现在密码和确认密码字段无效，为什么？ js代码是正确的
【问题讨论】：
如果有任何脚本错误，您是否尝试查看浏览器控制台？ 我现在看到了，它说 **Uncaught SyntaxError: Unexpected identifier ** 我解决了！ 谢谢大家，问题解决了，Hariprasad 和 nzn 解决了问题 意外的标识符 - 因为您错过了逗号运算符 是的，我解决了这个问题，但现在问题是其他的...... 【参考方案1】：你是在构建 DOM 之前编写你的 js。直到那时浏览器还不知道 register from 是什么。因此，您有两个选择，要么将您的 javascript 放在标签上方的页面底部，要么使用 window.onLoad 函数。这将工作......
【讨论】：
【参考方案2】：你应该选择$("#registerForm")而不是$("registerForm")
jquery selectors
【讨论】：
我没有看到，谢谢，Hariprasad 所说的解决了我的问题。【参考方案3】：您错过了提及选择器 ID $("#registerForm") 并在每个方法中提及 , 操作员的消息
JS：
$.validator.setDefaults(
submitHandler: function() alert("submited!!!");
);
$().ready(function()
$("#registerForm").validate(
rules :
username:
required: true,
minlength: 2
,
password:
required: true,
minlenght: 5
,
confirm_password:
required: true,
minlenght: 5,
equalTo: "#password"
,
email:
required: true,
email: true
,
messages :
username:
required: "Please enter a username",
minlenght: "Your username must consist at least 2 characters"
, //missed comma
password:
required: "Please enter a password ",
minlenght: "Your password must consist at least 5 characters"
, //missed comma
confirm_password:
required: "Please repeat the password",
minlenght: "Your password must consist at least 5 characters",
equalTo: "This password doesn't match with the original password"
, //missed comma
email:
required: "Please enter a email",
email: "Invalid email"
);
);
【讨论】：
以上是关于jQuery 验证插件不起作用的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 验证插件。回发后errorLabelContainer不起作用