Question

我一直在寻找一个有标签和验证功能的jQuery插件。我找到了，并且我尝试使用jquery-steps而我似乎无法让它发挥作用。我使用的是jQuery 2.1（包含在Scripts.jsp中）。这是我的代码：

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!');
            }
        });
    });

当我运行应用程序时，我看不到任何标签。我看到一个由页眉和fieldset标签分隔的长页面。那么，我错过了什么？是否需要其他.js文件？

谢谢！

Answer 1

您需要添加jquery验证库： http://jqueryvalidation.org

下载链接： http://jqueryvalidation.org/files/jquery-validation-1.13.1.zip

将/dist/jquery.validate.min.js添加到您的项目中，form.validate将起作用

使用jquery-steps的问题

1 个答案: