Question

我在我的项目中使用 jquery-steps插件。最初选项卡工作正常但是当我编写验证脚本时，选项卡和验证都不起作用。是否有任何需要引用 jquery validator plugin 在我的项目中。非常感谢。

我使用的代码如下所示

<head runat="server">
<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>  
<title></title>
</head>
<body>  
<script type="text/javascript">
$(function() {
    $("#form1").steps({
        headerTag: "h2",
        bodyTag: "fieldset",
        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!");
        }
    }).validate({
        errorPlacement: function(error, element) {
            element.before(error);
        },
        rules: {
            confirm: {
                equalTo: "#password"
            }
        }
    });            

});
</script>
<form id="form1"  runat="server">          
            <h2>First Step</h2>
            <fieldset>
                  <legend> First Step Info </legend>  
                    <label for="userName">User name *</label>
                    <input id="userName" name="userName" type="text" class="required">
                    <label for="password">Password *</label>
                    <input id="password" name="password" type="text" class="required">
                    <label for="confirm">Confirm Password *</label>
                    <input id="confirm" name="confirm" type="text" class="required">
                    <p>(*) Mandatory</p>

            </fieldset>

            <h2>Second Step</h2>
            <fieldset>
                <legend>Second Step Info</legend>   
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis, 
                    sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus. 
                    Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.

            </fieldset>                                             
</form>

Answer 1

问题解决了。我的猜测是对的。我需要将jquery验证器脚本引用到项目中，现在验证工作正常。

我的参考网站是jquery-steps

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

1 个答案: