Jquery:验证表单在Firefox中不起作用

时间:2011-11-29 16:05:04

标签: php jquery validation

我正在构建自己的商业网站,我希望在不刷新页面的情况下进行表单验证。我正在关注this video from 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;
    }



?>

2 个答案:

答案 0 :(得分:0)

尝试使用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");
            });
 }

显然我没有真正的测试方法,但总的来说它应该比你的工作效率更高。请注意,我将发送的对象更改为值而不是正在发送的事物的名称,您可以使用您传入的密钥更改处理该服务器端的方式。

答案 1 :(得分:0)

我会在你的后期AJAX中使用form.name.value。尝试$(this).val()代替。利用jQuery删除跨浏览器问题。