Question

当我独立执行时，带有验证的登录表单工作正常...但是当它与滑块代码合并时，表单只显示，表单验证不起作用...请有人帮帮我..这是我的代码......（这是一个下拉登录表单）

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

Answer 1

您的表单验证正在使用您发布的代码...

http://jsfiddle.net/sNCds/

请提供有关“验证无效”的更多信息。

您还在页面底部附近第二次添加了jQuery。如果这是“滑块代码”的一部分，你谈论的是你已经添加的内容，那么它很可能会破坏一切。您不应该一次在页面上使用多个版本的jQuery。您已经在页面顶部（版本1.8.3）中包含了一次jQuery，这对于它下面的所有内容都是足够的。

删除此行...

<script src="jquery-1.7.1.min.js"></script>

下拉登录表单的jquery验证

1 个答案: