我正在构建自己的商业网站，我想在不刷新页面的情况下进行表单验证。我正在观看youtube上的这个视频来帮助实现这个目标。然而，它在Chrome中工作得很好，但在Firefox中无法工作。有人能看出我做错了什么吗?谢谢你！
这是我的javascript来验证我的表单:
<script type="text/javascript" >
$(document).ready(function() {
$('#fname').keyup(function() {
$.post('action/validate_signup.php?key=fname', { fname: form.fname.value },
function(result){
$('#fname-error').html(result).show("slow");
});
});
$('#lname').keyup(function() {
$.post('action/validate_signup.php?key=lname', { lname: form.lname.value },
function(result){
$('#lname-error').html(result).show("slow");
});
});
$('#zipcode').keyup(function() {
$.post('action/validate_signup.php?key=zipcode', { zipcode: form.zipcode.value },
function(result){
$('#zipcode-error').html(result).show("slow");
});
});
$('#city').keyup(function() {
$.post('action/validate_signup.php?key=city', { city: form.city.value },
function(result){
$('#city-error').html(result).show("slow");
});
});
$('#email').keyup(function() {
$.post('action/validate_signup.php?key=email', { email: form.email.value },
function(result){
$('#email-error').html(result).show("slow");
});
});
$('#username').keyup(function() {
$.post('action/validate_signup.php?key=username', { username: form.username.value },
function(result){
$('#username-error').html(result).show("slow");
});
});
$('#password').keyup(function() {
$.post('action/validate_signup.php?key=pass', { pass: form.password.value },
function(result){
$('#password-error').html(result).show("slow");
});
});
$('#password2').keyup(function() {
var pass1 = $('#password').val();
var pass2 = $('#password2').val();
if( pass2.length < 5 ){
$('#password2-error').html("Too short!").show("slow");
}
else if(pass2 != pass1){
$('#password2-error').html("Didn't match!").show("slow");
}else{
$('#password2-error').html("<img src='images/check.jpg' />").show("slow");
}
});
});
</script>
这是我的注册页面表单的一部分:
<div class="signup-page">
<form id="ContactForm" action="#" name="form">
<h2><img src="images/mail.jpg" alt="Sign up to SittersCaregivers.com" width="23" height="24" >Contact Information</h2>
<div class="hr"></div>
<div class="wrapper">
<div class="error-div" id="fname-error" ></div>
<label>First name:</label>
<input type="text" class="input" name="fname" id="fname" />
</div>
<div class="wrapper">
<div class="error-div" id="lname-error" ></div>
<label>Last name:</label>
<input type="text" class="input" name="lname" id="lname" />
</div>
<div class="wrapper">
<div class="error-div" id="zipcode-error" ></div>
<label>Zip code:</label>
<input type="text" class="input" name="zipcode" id="zipcode" />
</div>
<div class="wrapper">
<div class="error-div" id="city-error" ></div>
<label>City:</label>
<input type="text" class="input" name="city" id="city" >
</div>
<div class="wrapper">
<div class="error-div" id="email-error" ></div>
<label>Email Address:</label>
<input type="text" class="input" name="email" id="email">
</div>
<div class="wrapper">
<div class="error-div" id="username-error" ></div>
<label>Username:</label>
<input type="text" class="input" name="username" id="username" />
</div>
<div class="wrapper">
<div class="error-div" id="password-error" ></div>
<label>Create Password:</label>
<input type="text" class="input" name="password" id="password">
</div>
<div class="wrapper">
<div class="error-div" id="password2-error" ></div>
<label>Confirm Password:</label>
<input type="password" class="input" name="password2" id="password2">
</div>
<div class="hr"></div>
<p>By clicking Continue, you agree to our Terms of Use and Privacy Policy.
You'll also receive account updates and special offers from Sittercity.com
which you can opt-out of at any time. </p>
<div class="wrapper">
<input type="submit" class="submit" value="Continue" name="Submit"id="submit"/>
</div>
</div>
</form>
这是我的一些虚拟验证。这只是一个样本验证。
<?php
if(isset($_GET['key'])){
$key = $_GET['key'];
switch($key){
case 'fname':
if(isset($_POST['fname'])){
$fname = $_POST['fname'];
if(empty($fname)){
echo " *First Name Required";
}elseif(strlen($fname)<3){
echo "*Name too short!";
}else{
echo "<img src='images/check.jpg' />";
}
}
break;
case 'lname':
if(isset($_POST['lname'])){
$lname = $_POST['lname'];
if(empty($lname)){
echo " *Last Name Required";
}elseif(strlen($lname)<3){
echo "*Last name too short!";
}else{
echo "<img src='images/check.jpg' />";
}
}
break;
case 'zipcode':
if(isset($_POST['zipcode'])){
$zip = $_POST['zipcode'];
if(empty($zip)){
echo "*Zipcode required!";
}elseif( (strlen($zip)<5) OR (strlen($zip)>5)){
echo "*Must be 5 digits!";
}elseif(!is_numeric($zip)){
echo "Must be numeric!";
}else{
echo "<img src='images/check.jpg' />";
}
}
break;
case 'city':
if(isset($_POST['city'])){
$city = $_POST['city'];
if(empty($city)){
echo "*City Required";
}elseif(strlen($city)<5){
echo "*Too short!";
}else{
echo "<img src='images/check.jpg' />";
}
}
break;
case 'email':
if(isset($_POST['email'])){
$email = $_POST['email'];
if(empty($email)){
echo "*Email Required";
}elseif(strlen($email)<5){
echo "*Too short!";
}else{
echo "<img src='images/check.jpg' />";
}
}
break;
case 'username':
if(isset($_POST['username'])){
$username = $_POST['username'];
if(empty($username)){
echo "*Username Required";
}elseif(strlen($username)<5){
echo "*Too short!";
}else{
echo "<img src='images/check.jpg' />";
}
}
break;
case 'pass':
if(isset($_POST['pass'])){
$pass = $_POST['pass'];
if(empty($pass)){
echo "*Password Required";
}elseif(strlen($pass)<5){
echo "*Too short!";
}else{
echo "<img src='images/check.jpg' />";
}
}
break;
Default: return false;break;
}
}else{
//do nothing
return false;
}
?>
我必须在您的post AJAX中使用form.name.value。试试$(this).val()。利用jQuery消除跨浏览器问题
try using bind('keyup change blur')， function(){});而不是。keyup此外，我不确定是否有必要检查每次按键，我会使用计时器函数来查看他们是否完成了输入，这是我在我的网站上使用的东西，应该给你一个很好的起点:
var typingTimer;
var doneTypeingInterval = 1000; //time in milliseconds for timeout
$(function () {
$("input").bind('keyup mouseup change', function () {
clearTimeout(typingTimer);
if ($(this).val) {
typingTimer = setTimeout(function(){checkingFunction($(this))}, doneTypingInterval);
}
});
});
function checkingFunction($object){
//do checking with your object here
var id = $object.attr('id');
$.post('action/validate_signup.php?key=' + id, { value: $object.val() },
function(result){
$('#' + id + 'error').html(result).show("slow");
});
}
显然，我没有真正的方法来测试它，但总的来说，它应该比您使用的更有效。注意，我将被发送的对象更改为value而不是被发送的对象的名称，您可以使用传入的键来更改处理服务器端的方式。