Question

我在aspx页面中使用了jquery-steps plugin。插件的演示在移动到下一个选项卡之前验证文本框。我无法实现相同的效果。我使用了以下代码

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/base/jquery-ui.css" />  
<link href="css/jquery.steps.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/normalize.css" rel="stylesheet" type="text/css" />    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="scripts/jquery.steps.js" type="text/javascript"></script>
<script src="scripts/jquery.steps.min.js" type="text/javascript"></script>

           <script>
            $(function() {
                $("#wizard").steps({
                    headerTag: "h2",
                    bodyTag: "section",
                    transitionEffect: "slideLeft",
                    onStepChanging: function(event, currentIndex, newIndex) {
                        $("#form1").validate().settings.ignore = ":disabled,:hidden";
                        return $("#form1").valid();
                    },
                    onFinishing: function(event, currentIndex) {
                        $("#form1").validate().settings.ignore = ":disabled";
                        return $("#form1").valid();
                    },
                    onFinished: function(event, currentIndex) {
                        alert("Submitted!");
                    }
                });
                });
            });
        </script>
<div class="content" >
        <h1>Basic Demo</h1>

        <div id="wizard" >
            <h2>First Step</h2>
            <section>
                <p>
                    <label for="userName">User name *</label>
                    <input id="userName" class="required" type="text" name="userName"/>
                    <label for="password">Password *</label>
                    <input id="password" class="required" type="text" name="password"/>
                    <label for="confirm">Confirm Password *</label>
                    <input id="confirm" class="required" type="text" name="confirm"/>
                    <p>(*) Mandatory</p>


                </p>
            </section>

            <h2>Second Step</h2>
            <section>
                <p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque. 
                    In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum 
                    dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur. 
                    In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam. 
                    Donec non pulvinar urna. Aliquam id velit lacus.</p>
            </section>
       </div>
    </div>

Answer 1

我没有使用该插件的经验，但看看代码，你似乎错过了验证逻辑。这是从示例页面中提取的代码。

$("#wizard-2").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        $("#form-2").validate().settings.ignore = ":disabled,:hidden";
        return $("#form-2").valid(); 
    },
    onFinishing: function (event, currentIndex)
    {
        $("#form-2").validate().settings.ignore = ":disabled";
        return $("#form-2").valid();
    },
    onFinished: function (event, currentIndex)
    {
        alert("Submitted!");
    }
});

无法使用jquery插件验证文本框

1 个答案: