这是我重置用户密码的代码，因为用户忘记了密码。数据通过AJAX请求发送到PHP代码，PHP代码根据输入的有效性简单地回显“Y”或“N”。
问题是，AJAX调用在Firefox 19和IE 9中不起作用。我还没有尝试过其他版本的IE。 AJAX调用在chrome和safari中完美运行。有没有人遇到过同样的问题？有人可以帮忙吗？
<title> Forgot Password? </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery- validation/jquery.validate.js"></script>
<style type="text/css">
label.error { color: red; }
#status { color: green; }
</style>
<script>
$(document).ready(function(){
$('#code_form').hide();
$('#password_form').hide();
$("#email_form").validate({
onkeyup: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: "Please enter your email ID.",
email: "Please enter a valid email ID."
}
}
});
$('#email_send').click(function() {
event.preventDefault();
var email = $('#email').val();
$.ajax({
type: "POST",
url: "reset_code.php",
data: {email: email},
cache: false,
success: function(response){
if(response == "Y")
{
$('#code_form').show();
$('#email_send').hide();
$('#status').html("Check your mail for the reset code.");
}
else
{
$('#status').html("Looks like you have entered a wrong email ID.");
}
}
});
});
$("#code_form").validate({
onkeyup: false,
rules: {
code: {
required: true,
digits: true
}
},
messages: {
code: {
required: "Please enter the code received in your mail.",
digits: "Please enter the code received in your mail."
}
}
});
$('#code_send').click(function() {
event.preventDefault();
var email = $('#email').val();
var code = $('#code').val();
$.ajax({
type: "POST",
url: "code_verify.php",
data: {email: email, code: code},
cache: false,
success: function(response){
if(response == "Y")
{
$('#password_form').show();
$('#code_send').hide();
$('#status').html("Ok, now enter your password twice before you forget again.");
}
else
{
$('#status').html("Please enter the code received in your mail.");
}
}
});
});
$("#password_form").validate({
onkeyup: false,
rules: {
password: {
required: true,
minlength: 8
},
repassword: {
required: true,
equalTo: "#password"
}
}
});
$('#password_send').click(function() {
event.preventDefault();
var email = $('#email').val();
var password = $('#password').val();
var repassword = $('#repassword').val();
$.ajax({
type: "POST",
url: "update_password.php",
data: {email: email, password: password, repassword: repassword},
cache: false,
success: function(response){
if(response == "Y")
{
$('#email_form').hide();
$('#code_form').hide();
$('#password_form').hide();
$('#status').html("Password reset successful. Proceed to <a href=index.php>login</a> page. ");
}
else
{
$('#status').html("Oops. Something went wrong. Try again.");
}
}
});
});
});
</script>
</head>
<body class="oneColElsCtr">
<div class ="about_body">
<a href="index.php"><img src="images/title_block_logon.png" style="margin- top:25px; margin-bottom:-10px;"/></a><br/>
<div id="status" class="alert alert-success" style="margin-top:20px; width:400px; margin-left:235px; margin-bottom:30px;">
<h4 class="alert-heading"> Reset your password </h4>
</div>
<form class="form-horizontal" name="email_form" id="email_form" method="POST" action="" >
<fieldset>
<div class="control-group" style="margin-left:230px">
<label class="control-label">Email</label>
<div class="controls" align="left">
<input name="email" id="email" class="input-large" type="text" placeholder="Enter your Email id"/>
</div>
</div>
<div class="control-group">
<button type="submit" id="email_send" class="btn btn-inverse submit">GO</button>
</div>
</fieldset>
</form>
<form class="form-horizontal" name="code_form" id="code_form" method="POST" action="" >
<p>Enter the code received in your Email</p>
<fieldset>
<div class="control-group" style="margin-left:230px">
<label class="control-label">Code</label>
<div class="controls" align="left">
<input name="code" id="code" class="input-large" type="text" placeholder="#####"/>
</div>
</div>
<div class="control-group">
<button type="submit" id="code_send" class="btn btn-inverse submit">GO</button>
</div>
</fieldset>
</form>
<table style="text-align:left">
<tr>
<td width="60%">
<form class="form-horizontal" name ="password_form" id="password_form" method ="POST" action ="" >
<fieldset>
<div class="control-group" style="margin-left:90px;">
<label class="control-label">Password</label>
<div class="controls">
<input name="password" id="password" class="input-large" type="password" placeholder="Enter your Password" onfocus="Info_Over('#password_on_focus_info')" onblur="Info_Out('#password_on_focus_info')"/>
</div>
</div>
<div class="control-group" style="margin-left:90px;">
<label class="control-label">Confirm Password</label>
<div class="controls">
<input name="repassword" id="repassword" class="input-large" type="password" placeholder="Re-enter your Password"/>
</div>
</div>
<div class="control-group" style="margin-left:250px;">
<button type="submit" id="password_send" class="btn btn-inverse submit">CONFIRM</button>
</div>
</fieldset>
</form>
</td>
<td width="400px" valign="top" style="padding-right:130px">
<span id="password_on_focus_info" style="display:none;">
Password should be 8 characters or more. Choose a strong password which is a combination of Capital and Small case alphabets, Symbols and Numbers.
</span>
</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：5)
您必须为事件处理程序的参数使用事件对象，chrome和safari在触发事件但firefox没有时会有一个名为event的全局事件对象。因此event.preventDefault();会导致错误。
E.g。
$('#email_send').click(function(event) {
答案 1 :(得分：1)
如前所述，您未正确实施preventDefault()处理程序内的click。但是，即使您修复了preventDefault()问题，它仍可能无法正常运行。请参阅：http://jsfiddle.net/ZEFzx/，其中click处理程序中的代码根本不会被触发。
幸运的是，您不需要担心click处理程序，因为jQuery Validate插件已经内置了提交事件处理程序回调函数，而这正是假设的地方放置你的ajax。
As per the documentation for the Validate plugin，submitHandler回调函数是：
“在表单有效时回调处理实际提交。获取 形式作为唯一的论点。替换默认提交。 正确 在验证后通过Ajax提交表单。“
请尝试使用此代码：
$(document).ready(function () {
$("#email_form").validate({
onkeyup: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: "Please enter your email ID.",
email: "Please enter a valid email ID."
}
},
submitHandler: function (form) {
var email = $('#email').val();
// var data = $(form).serialize(); // capture all the form data at once
$.ajax({
type: "POST",
url: "reset_code.php",
data: {
email: email
},
cache: false,
success: function (response) {
if (response == "Y") {
$('#code_form').show();
$('#email_send').hide();
$('#status').html("Check your mail for the reset code.");
} else {
$('#status').html("Looks like you have entered a wrong email ID.");
}
}
});
return false; // blocks redirect after submission via ajax
}
});
});