-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。您已经在页面顶部包含了一次 jQuery（版本 1.8.3），这对于它下面的所有内容来说已经足够了。

删除此行...

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