1

タブと検証を備えた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!');
            }
        });
    });

アプリケーションを実行すると、タブが表示されません。ヘッダーとフィールドセット タグで区切られた 1 つの長いページが表示されます。それで、私は何が欠けていますか？他に必要な .js ファイルはありますか?

ありがとう！

4

1 に答える 1

1

http://jqueryvalidation.orgから jquery 検証ライブラリを追加する必要があります。

ダウンロードリンク: http://jqueryvalidation.org/files/jquery-validation-1.13.1.zip

/dist/jquery.validate.min.js をプロジェクトに追加すると、form.validate が機能します

于 2015-01-21T00:33:46.690 に答える