-1

検証付きのログインフォームは、個別に実行すると完全に機能します...しかし、スライダーコードとマージすると、フォームが表示されるだけで、フォームの検証が機能しません...誰か助けてください..私のコード...（ドロップダウンのログインフォームです）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="iview.css" />
    <link rel="stylesheet" href="style1.css" />
    <link rel="stylesheet" href="login.css" />
    <style type="text/css"></style>
<script src="jquery-1.8.3.js"></script>
<script src="loginbut/js/login.js"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

$("#loginForm").validate({
    rules: {
        email: {
            required: true
        },
        password: {
            required: true
        }
    },
    messages: {
        email: {
            required: "specify email"
        },
        password: {
            required: "specify password"
        }
    }
});

// Login Form

$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
    box.toggle();
    button.toggleClass('active');
});
form.mouseup(function() { 
    return false;
});
$(this).mouseup(function(login) {
    if(!($(login.target).parent('#loginButton').length > 0)) {
        button.removeClass('active');
        box.hide();
    }
});
});


});

</script>

</head>

<body>
    <br/>
<br/>

<div id="bar">
    <div id="container">
        <!-- Login Starts Here -->
        <div id="loginContainer">
            <a href="#" id="loginButton"><span>Login</span><em></em></a>
            <div style="clear:both"></div>
            <div id="loginBox">                
                <form id="loginForm">
                    <fieldset id="body">
                        <fieldset>
                            <label for="email">Email Address</label>
                            <input type="text" name="email" id="email" />
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password" />
                        </fieldset>
                        <input type="submit" id="login" value="Sign in" />
                        <label for="checkbox"><input type="checkbox" id="checkbox"    />Remember me</label>
                    </fieldset>
                    <span><a href="#">Forgot your password?</a></span>
                </form>
            </div>
        </div>
        <!-- Login Ends Here -->
    </div>
</div>

<div class="container">
    <div id="iview">
        <div data-iview:image="1.jpg" data-iview:transition="slice-top-      fade,slice-right-fade">
    <div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>&trade;</sup></div>
            <div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">The world's most awesome jQuery Image & Content Slider</div>
            <div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"><i>Presented by <b>Hemn Chawroka</b></i></div>
        </div>

        <div data-iview:image="2.jpg" data-iview:transition="zigzag-top,strip-left-fade" data-iview:pausetime="3000">
            <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Captions can be positioned and resized freely</div>
            <div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Example URL-link</a></div>
        </div>



    </div>
</div>




<script type="text/javascript" src="fullscreen.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#background-image").fullscreenBackground();
});
</script>



    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="raphael.js"></script>
    <script type="text/javascript" src="easing.js"></script>


    <script src="iview.js"></script>
    <script>
        $(document).ready(function(){
            $('#iview').iView({
                pauseTime: 7000,
                directionNav: false,
                controlNav: true,
                tooltipY: -15
            });
        });
    </script>
</body>
</html>
4

1 に答える 1

0

フォームの検証は、投稿したコードで機能しています...

http://jsfiddle.net/sNCds/

「検証が機能していない」とはどういう意味かについて、さらに詳しい情報を提供してください。

また、ページの下部近くに jQuery をもう一度含めました。これがあなたが追加した「スライダーコード」の一部である場合、それがすべてを壊している可能性があります. ページで一度に複数のバージョンの jQuery を使用しないでください。ページの上部 (バージョン 1.8.3) に jQuery が既に 1 回含まれていますが、これはその下のすべてに適しています。

この行を削除...

<script src="jquery-1.7.1.min.js"></script>
于 2013-02-16T15:54:39.353 に答える