Jquery: Validate the form does not work in Firefox

advertisements

I am in the process of building my own business site, and I want to have form validation without refreshing the page. I am following this video from youtube to help accomplish this goal. However, it works perfectly in Chrome but will not work in Firefox. Can anyone see what I am doing wrong? Thank You!

Here is my javascript to validate my form:

    <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>

This is part of my sign up page form:

<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>

And here is some of my dummy validation. It's just a sample validation.

<?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;
    }

?>


I would neccessarilly use form.name.value in your post AJAX. Try $(this).val() instead. Leverage the jQuery to remove cross browser issues.