3 Replies - 12999 Views - Last Post: 11 May 2011 - 09:22 AM

#1 james31rock  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 12-February 09

jQuery popup Form Validation not working in IE 8

Posted 25 October 2010 - 12:44 PM

Hi all. I am having trouble with validation not working in IE 8. I have a popup form which I have implemented from:

http://aext.net/2009...er-with-jquery/

Also I have added additional functionality using a validation script I found at:

http://www.position-...tion-is-a-mess/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="Styles/main.css" />
    <link rel="stylesheet" href="Styles/validationEngine.jquery.css" type="text/css"
        media="screen" title="no title" charset="utf-8" />
    <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
    <![endif]-->

    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>

    <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>

    <script src="js/jquery.js" type="text/javascript"></script>

    <script src="js/jquery.tipsy.js" type="text/javascript"></script>

    <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>

    <script src="js/jquery.validationEngine.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $("#signup_menu").validationEngine()

            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").slideDown(200).toggle();
                $(".signin").toggleClass("menu-open");
                // $(':input:first').focus();
            });

            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if ($(e.target).parent("a.signin").length == 0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
                }
            });


            $(".signup").click(function(e) {
                e.preventDefault();
                $("fieldset#signup_menu").toggle();
                $(".signup").toggleClass("menu-open");
            });

            $("fieldset#signup_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if ($(e.target).parent("a.signup").length == 0) {
                    $(".signup").removeClass("menu-open");
                    $("fieldset#signup_menu").hide();
                }
            });

        });


        $(function() {
            $('#forgot_username_link').tipsy({ gravity: 'w' });
        });
    </script>

</head>
<body class="main">
    <div id="imageWrap">
        <div id="container">
            <div id="header">
                <a href="login" class="signup"><span>Sign up</span></a> <a href="login" class="signin">
                    <span>Log in</span></a>
            </div>
            <div id="navigation">
                <fieldset id="signin_menu">
                    <form method="post" id="signin" action="https://twitter.com/sessions">
                    <p>
                        <label for="username">
                            Username</label>
                        <input id="username" name="username" value="" title="username" tabindex="1" type="text" />
                    </p>
                    <p>
                        <label for="password">
                            Password</label>
                        <input id="password" name="password" value="" title="password" tabindex="2" type="password" />
                    </p>
                    <p>
                        <input id="signin_submit" value="Sign in" tabindex="6" type="submit" />
                    </p>
                    <p class="forgot">
                        <a id="forgot_username_link" title="If you forgot your password click here and security questions will be asked."
                            href="#">Forgot password?</a>
                    </p>
                    </form>
                </fieldset>
                <fieldset id="signup_menu">
                    <form method="post" id="signin" action="signup.php">
                    <p>
                        <label for="signUpUsername">
                            Desired Username</label>
                        <input id="signUpUsername" name="signUpUsername" value="" title="signUpUsername"
                            tabindex="4" type="text" />
                    </p>
                    <p>
                        <label for="signUpPassword1">
                            Password</label>
                        <input id="signUpPassword1" name="signUpPassword1" value="" title="signUpPassword1"
                            tabindex="5" type="password" class="validate[required,length[6,11]] text-input" />
                    </p>
                    <p>
                        <label for="signUpPassword2">
                            Re-enter password</label>
                        <input id="signUpPassword2" name="signUpPassword2" value="" title="signUpPassword2"
                            tabindex="6" type="password" class="validate[required,confirm[password]] text-input" />
                    </p>
                    <p>
                        <label for="email" style="display: block;">
                            Email</label>
                        <input id="email" name="email" value="" title="email" tabindex="6" type="text" style="display: inline;" /><span
                            style="padding-left: 5px;">@morrisville.edu</span>
                    </p>
                    <p>
                        <input id="signup_submit" value="Sign up" tabindex="6" type="submit" />
                    </p>
                    </form>
                </fieldset>
                <!-- end #header -->
            </div>
            <div id="mainContent">
            </div>
            <div id="footer">
           FOOTER TEXT
                <!-- end #footer -->
            </div>
            <!-- end #container -->
        </div>
    </div>
</body>
</html>





Now this works fine in FF and chrome, but it doesnt work in IE 8 and probably 6 and 7 too. The problem is that the form doesnt always show up. I tested when the form isnt hidden and it works perfectly fine. Does anyone have any suggestions?

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery popup Form Validation not working in IE 8

#2 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: jQuery popup Form Validation not working in IE 8

Posted 25 October 2010 - 01:55 PM

You have two different forms with the same ID. HTML does not allow two elements to have the same ID.

This post has been edited by forest51690: 25 October 2010 - 01:56 PM

Was This Post Helpful? 0
  • +
  • -

#3 james31rock  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 12-February 09

Re: jQuery popup Form Validation not working in IE 8

Posted 25 October 2010 - 05:32 PM

Whoops, that was part of the problem. The other part was not accessing the forms ID. I was accessing the fieldset ID which IE doesnt like. It was working fine when the input box left focus, but wasnt working correctly when it posted back.

Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 Mmiranda  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 11-May 11

Re: jQuery popup Form Validation not working in IE 8

Posted 11 May 2011 - 09:22 AM

help about it with firefox
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1