0

私のコードは IE7 で動作しますが、object required エラーが発生し、chrome と firefox では動作しません。私を助けてください。以下は私のコードです。IE7ブラウザはjquery関数の最初からエラーを表示しますが、続行できます。しかし、chrome と safari では、送信ボタンと Validate() 関数が機能しません。

            <link rel="stylesheet" type="text/css" href="css/style.css" />
            <script src="js/cufon-yui.js" type="text/javascript"></script>
            <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
            <script type="text/javascript">
            Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
            Cufon.replace('h2',{ textShadow: '1px 1px #fff'});
            Cufon.replace('h3',{ textShadow: '1px 1px #000'});
            Cufon.replace('.back');
            </script>
            <script type="text/javascript">
            function validate(){
            var Uname=document.getElementById("username")
            if(Uname.value==""||Uname.value==null){
            alert("Enter Your User Name")
            Uname.focus()
            return false
            }
            if(Uname.value.length<6){
            alert("Min-6 characters for your UserName")
            Uname.focus()
            return false
            }
            var pass=document.getElementById("password")
            if(pass.value==""||pass.value==null){
            alert("Enter Your Password")
            pass.focus()
            return false
            }
            if(pass.value.length<6){
            alert("Min-6 characters for your Password")
            pass.focus()
            return false
            }
            return true 
            }
            </script>
            </head>
            <body>
            <div class="wrapper">
            <h1>User Management</h1>
            <div class="content">
            <div id="form_wrapper" class="form_wrapper">
            <form class="login active" onSubmit="return validate() action="login.php" method="post">
            <h3>Login</h3>
            <div>
            <label>Username:</label>
            <input type="text" id="username"/> 
            <span class="error">enter ur email id</span>
            </div>
            <div>
            <label>Password: </label>
            <input type="password"  id="password"/><a href="forgot_password.html" rel="forgot_password" class="forgot linkform">Forgot your password?</a>
            </div>
            <div class="bottom">
            <input type="submit" value="Login"></input>
            <div class="clear"></div>
            </div>
            </form>
            <form class="forgot_password" onSubmit="return validate() action="forgotpassword.php" method="post">
            <h3>Forgot Password</h3>
            <div>
            <label>Username</label>
            <input type="text" />
            <span class="error">enter ur email id</span>
            </div>
            <div class="bottom">
            <input type="submit" value="Send reminder"></input>
            <a href="index.php" rel="login" class="linkform">Suddenly remebered? Log in here</a>
            <div class="clear"></div>
            </div>
            </form>
            </div>
            <div class="clear"></div>
            </div>

            </div>


            <!-- The JavaScript -->
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script type="text/javascript">
            $(function() {
            //the form wrapper (includes all forms)
            var $form_wrapper   = $('#form_wrapper'),
            //the current form is the one with class active
            $currentForm    = $form_wrapper.children('form.active'),
            //the change form links
            $linkform       = $form_wrapper.find('.linkform');

            //get width and height of each form and store them for later                        
            $form_wrapper.children('form').each(function(i){
            var $theForm    = $(this);
            //solve the inline display none problem when using fadeIn fadeOut
            if(!$theForm.hasClass('active'))
            $theForm.hide();
            $theForm.data({
            width   : $theForm.width(),
            height  : $theForm.height()
            });
            });

            //set width and height of wrapper (same of current form)
            setWrapperWidth();

            /*
            clicking a link (change form event) in the form
            makes the current form hide.
            The wrapper animates its width and height to the 
            width and height of the new current form.
            After the animation, the new form is shown
            */
            $linkform.bind('click',function(e){
            var $link   = $(this);
            var target  = $link.attr('rel');
            $currentForm.fadeOut(400,function(){
            //remove class active from current form
            $currentForm.removeClass('active');
            //new current form
            $currentForm= $form_wrapper.children('form.'+target);
            //animate the wrapper
            $form_wrapper.stop()
            .animate({
            width   : $currentForm.data('width') + 'px',
            height  : $currentForm.data('height') + 'px'
            },500,function(){
            //new form gets class active
            $currentForm.addClass('active');
            //show the new form
            $currentForm.fadeIn(400);
            });
            });
            e.preventDefault();
            });

            function setWrapperWidth(){
            $form_wrapper.css({
            width   : $currentForm.data('width') + 'px',
            height  : $currentForm.data('height') + 'px'
            });
            }


            $form_wrapper.find('input[type="submit"]')
            .click(function(e){
            e.preventDefault();
            }); 
            });
            </script>
            </body>
4

1 に答える 1

1

for クラスの onSubmit には、終了の二重引用符がありません。

 <form class="login active" onSubmit="return validate()**"** action="login.php" method="post">

これで問題が解決し、イベントがトリガーされます。

于 2013-04-26T12:03:34.980 に答える