Cannot validate textbox using jquery plugin

292 views Asked by At

I'm using following jquery-steps plugin in aspx page. The demo of the plugin validate textboxes before moving to the next tab.I cannot achive the same.I have used the following code

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

There are 1 answers

2
Claudio Redi On

I don't have experience with that plugin but taking a look to the code it seems you're missing the validation logic. This is the code extracted from examples page.

$("#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!");
    }
});