Problems using jquery-steps

Question

I've been looking for a jQuery plugin that has tabbing and validation. I've found and I'm trying to use jquery-steps and I can't seem to get it to work. I'm using jQuery 2.1 (included in the Scripts.jsp). Here's my code:

Jsp:

<link rel="stylesheet" href="/eServices/css/jquery.steps.css"
    type="text/css" />

<jsp:include page="/pages/includes/Scripts.jsp" />
<script type="text/javascript"
    src="<s:text name="cp.globalContextPath"/>js/jquery.steps.js"></script>

<s:div id="wrapper">
    <s:div id="maincontent">
        <s:form name="tabs_form" id="tabs_form" cssClass="tabcontrol">
            <h3>Intake</h3>
            <fieldset id="intake" class="step">
              ...a few fields
            </fieldset>
            <h3>Details</h3>
            <fieldset id="details" class="step">
              ...a few more fields
            </fieldset>
            <h3>Comments</h3>
            <fieldset id="comments" class="step">
              ...a few more fields
            </fieldset>
        </s:form>
    </s:div>
</s:div>

jQuery:

$(function() {

        var form = $("#tabs_form");

        form()
                .validate(
                        {
                            rules : {
                                "reportedByName" : {
                                    required : true
                                },
                                "reportedByPhone" : {
                                    required : true
                                }
                            },
                            messages : {
                                "reportedByName" : {
                                    required : "The Reported By Name is required."
                                },
                                "reportedByPhone" : {
                                    required : "The Reported By Phone Number is required."
                                }
                            },
                            errorContainer : $('#errorContainer'),
                            errorLabelContainer : $('#errorContainer ul'),
                            wrapper : 'li'
                        });

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

When I run the application, I don't see any tabs. I see one long page separated by he headers and fieldset tags. So, what am I missing? Are there other .js files needed?

Thanks!

Answer 1

You need to add jquery validation library from: http://jqueryvalidation.org

Download link: http://jqueryvalidation.org/files/jquery-validation-1.13.1.zip

Add /dist/jquery.validate.min.js to your project and form.validate will work