未调用jQuery验证
jQuery validation not being called
我正在为我正在构建的PHP身份验证系统构建前端，我正在使用jQuery，我或多或少了解一些基础知识，并在登录、注册和激活页面上成功使用它来显示错误/成功消息，在发送前对密码进行散列，为用户分配cookie和表单验证。
我目前正在研究重置系统，这部分是步骤2，在用户收到重置请求电子邮件后，他们来到网站并输入重置代码，或者使用直接链接并单击按钮。jQuery随后向服务器发送一个请求，验证重置密钥，如果不正确，则显示相应的消息，如果正确，则清除.formdiv并用另一个表单（#resetpass）替换它。在这个表单中，用户输入他们的新密码，然后将其发送到服务器，但由于某种原因，jQuery没有接收到提交，表单是正常提交的，而不是通过Ajax提交的，我已经查看了很长一段时间的代码，更改了这个和那个，没有得到积极的结果。我做错了什么？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHPAuth 2.0 - Reset Password</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Base CSS -->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Jquery CSS (UI + Addons) -->
<link href="css/ui-lightness/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<!-- Jquery base file + Jquery UI -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.message.js"></script>
<!-- Jquery plugins for this page : To be compiled -->
<script type="text/javascript" src="js/reset/jquery.validate.js"></script>
<script type="text/javascript" src="js/reset/jquery.qtip.js"></script>
<script type="text/javascript" src="js/reset/jquery.crypt.js"></script>
</head>
<body>
<div class="logo"></div>
<div class="form">
<form id="reset" method="post">
<input type="text" name="resetkey" id="password" placeholder="Reset Key" <?php if(isset($_GET['key'])) { echo "value='"" . $_GET['key'] . "'" "; } ?>/>
<input type="submit" id="reset" value="Reset Password" />
</form>
</div>
<div class="small">
<a href="?page=login">I know my password</a><br/>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#reset').validate({
errorClass: "errormessage",
onkeyup: false,
errorClass: 'error',
validClass: 'valid',
rules: {
password: { required: true, minlength: 3, maxlength: 100 }
},
errorPlacement: function(error, element)
{
var elem = $(element),
corners = ['right center', 'left center'],
flipIt = elem.parents('span.right').length > 0;
if(!error.is(':empty')) {
elem.filter(':not(.valid)').qtip({
overwrite: false,
content: error,
position: {
my: corners[ flipIt ? 0 : 1 ],
at: corners[ flipIt ? 1 : 0 ],
viewport: $(window)
},
show: {
event: false,
ready: true
},
hide: false,
style: {
classes: 'ui-tooltip-red'
}
})
.qtip('option', 'content.text', error);
}
else { elem.qtip('destroy'); }
},
success: $.noop,
})
$('#resetpass').validate({
errorClass: "errormessage",
onkeyup: false,
errorClass: 'error',
validClass: 'valid',
rules: {
resetkey: { required: true, minlength: 20, maxlength: 20 }
},
errorPlacement: function(error, element)
{
var elem = $(element),
corners = ['right center', 'left center'],
flipIt = elem.parents('span.right').length > 0;
if(!error.is(':empty')) {
elem.filter(':not(.valid)').qtip({
overwrite: false,
content: error,
position: {
my: corners[ flipIt ? 0 : 1 ],
at: corners[ flipIt ? 1 : 0 ],
viewport: $(window)
},
show: {
event: false,
ready: true
},
hide: false,
style: {
classes: 'ui-tooltip-red'
}
})
.qtip('option', 'content.text', error);
}
else { elem.qtip('destroy'); }
},
success: $.noop,
})
});
$("#reset").submit(function(event) {
if($("#reset").valid()) {
event.preventDefault();
var $form = $( this ),
resetkey = $form.find('input[name="resetkey"]').val();
$.post("inc/action.php?a=reset2", {key: resetkey},
function(data) {
if(data['error'] == 1)
{
$("#message").remove();
$(".form").prepend('<div id="message"></div>');
$("#message").message({type: "error", dismiss: false, message: data['message']});
$("#message").effect("shake", {times: 2, distance: 10}, 200);
}
else if(data['error'] == 0)
{
$(".form").empty();
$(".form").append('<form id="resetpass" method="post">');
$("#resetpass").append('<input type="hidden" name="resetkey" value="' + resetkey + '" />');
$("#resetpass").append('<input type="password" name="password" id="password" placeholder="New Password" />');
$("#resetpass").append('<input type="submit" id="reset" value="Change Password" />');
}
}, "json"
);
}
else
{
$("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
return false;
}
});
$("#resetpass").submit(function(event) {
if($("#resetpass").valid()) {
event.preventDefault();
var $form = $( this ),
resetkey = $form.find( 'input[name="resetkey"]' ).val(),
pass = $().crypt({method:"sha1",source:$().crypt({method:"sha1",source:$form.find( 'input[name="password"]' ).val()})});
$.post("inc/action.php?a=reset3", {key: resetkey, password: pass},
function(data) {
if(data['error'] == 1)
{
$("#message").remove();
$(".form").prepend('<div id="message"></div>');
$("#message").message({type: "error", dismiss: false, message: data['message']});
$("#message").effect("shake", {times: 2, distance: 10}, 200);
}
else if(data['error'] == 0)
{
$("#message").remove();
$(".form").prepend('<div id="message"></div>');
$("#message").message({type: "info", dismiss: false, message: data['message']});
$("#message").effect("pulsate", {times: 2}, 200);
}
}, "json"
);
}
else
{
$("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
return false;
}
});
</script>
</body>
</html>
非常感谢您的帮助：）
为什么有两个id相同的标签"reset"尝试而不是重新设置。提交
<form id="resetfrm" method="post" onsubmit="fnSubmit();return false;">
function fnSubmit(){
if($("#reset").valid()) {
var $form = $( this ),
resetkey = $form.find('input[name="resetkey"]').val();
$.post("inc/action.php?a=reset2", {key: resetkey},
function(data) {
if(data['error'] == 1)
{
$("#message").remove();
$(".form").prepend('<div id="message"></div>');
$("#message").message({type: "error", dismiss: false, message: data['message']});
$("#message").effect("shake", {times: 2, distance: 10}, 200);
}
else if(data['error'] == 0)
{
$(".form").empty();
$(".form").append('<form id="resetpass" method="post">');
$("#resetpass").append('<input type="hidden" name="resetkey" value="' + resetkey + '" />');
$("#resetpass").append('<input type="password" name="password" id="password" placeholder="New Password" />');
$("#resetpass").append('<input type="submit" id="reset" value="Change Password" />');
}
}, "json"
);
}
else
{
$("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
return false;
}
}
由于在irc.greenode.net 上的#jquery中使用了Shoky，问题得以解决
在我将这些东西添加到window_timeout函数中的DOM之后，我只需要将所有的代码都扔进去进行验证和提交。
相关文章：
- 验证jquery中的数字
- 在发送之前验证jQuery或Javascript中的URL
- 提交/验证Jquery
- 验证 jQuery 中带有一个小数位的负数
- 如何验证 jquery cookie .js兼容性
- 验证 JQuery 中是否存在 URL
- 电子邮件验证 jquery
- 选择.js并验证 jquery
- 验证 jquery 评级星
- 如何为这些要求创建 URL 验证 jQuery
- 时间选择器验证?JQuery/Javascript
- 删除最近的下拉列表并验证Jquery中的下拉列表
- 验证jquery函数的问题
- 电子邮件验证Jquery不起作用
- 如何验证jquery函数中的输入字段
- 表单验证——jQuery验证是否足够，以及如何在PHP中巧妙地验证数据
- 当其他浏览器验证时，是什么导致I.E.不验证(jquery) ?
- 提交表单与ajax验证jquery /标准javascript
- 如何验证jquery中的表单
- 尝试验证jQuery UI日期选择器
