I’m building a front end for a PHP Authentication system I’m building, I’m using jQuery, I know more or less the basics and am using it successfully over the login, registration and activation pages to display error / success messages, hash the password before being sent, assign a cookie for the user and form validation.
I’m currently working on the reset system, this part is Step 2, after the user has received the reset request email, they come on the site and enter the Reset code, or use a direct link and just click the button. The jQuery then sends a request to the server verifying the reset key, if incorrect, display appropriate message, if correct, clear out the .form div and replace it with another form (#resetpass). In this form the user types in their new password which should then be sent to the server, but for some reason jQuery isn’t catching the submit and the form is being submitted normally, not via Ajax, I’ve been looking over the code for quite a while now, changing this and that, with no positive outcome. What am I doing wrong ?
<!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>
Any help is greatly appreciated 🙂
Problem resolved thanks to Shoky in #jquery on irc.freenode.net
Just had to throw all my code for validation and submitting in AFTER I had added the stuff to the DOM, within the window_timeout function.