1

いくつかの入力フィールドを持つフォームがあります。入力フィールドをグループ化するために、tabStrip KendoUI ウィジェットを使用しています。Kendo バリデーターを使用しています。フォームが送信されると、いくつかのエラー メッセージが表示されます。問題は、エラー メッセージが表示された入力フィールドが別のタブにある場合、現在選択されているユーザーがそれを見ることができないことです。私が達成したいのは、フォームが検証されたときに、エラーメッセージが選択され、フォーカスがその入力フィールドにある最初の入力フィールドを含むタブです。サンプルコードは次のとおりです。

<script type="text/javascript">
    $("#tabStrip").kendoTabStrip();
</script>

<div id="tabStrip">
    <ul>
        <li class="k-state-active">Master Info</li>
        <li>Developer Info</li>
    </ul>
     <div id="tabStrip-1">
         <div>
            <label for="folderName" class="required">Folder Name:</label>
            <input type="text" id="folderName" name="folderName"  required />
            <span class="k-invalid-msg" data-for="folderName"></span>
        </div>
        <div>
            <label for="afk">Afk:</label>
            <input type="text" id="afk" name="afk" data-bind = "value: Afk" />
        </div>
     </div>
     <div id="tabStrip-2">
         <div>
            <label for="updateFolder" class="required">Update Folder:</label>
            <input type="text" id="Text1" name="updateFolder" class="k-input k-invalid" required />
            <span class="k-invalid-msg" data-for="updateFolder"></span>
        </div>
        <div>
            <label for="age">Age:</label>
            <input type="text" id="age" name="age" class="k-input k-invalid" data-bind = "value: Age" />
        </div>
     </div>
</div>

私の考えは、 id="tabStrip-1" を使用して div にあるすべての入力フィールドを取得しclass="k-input k-invalid"、検証エラーが発生したときに入力フィールドに適用されることがわかっている限り、含まれているかどうかを確認することです。入力フィールドにクラスが含まれている場合は、タブの ID をこれに変更し、その要素にフォーカスを設定します。すべてのフィールドが有効な場合は、次のタブで同じことを行います。入力要素を取得して foreach するために Jquery でこれを試しましたが、Web 開発のスキルが非常に低く、成功しませんでした。私のアプローチはうまくいくと思います。より良いアプローチのための実用的な例や提案についての助けは大歓迎です。ありがとう！

4

2 に答える 2

1

kendoTabStrip はわかりませんが、このコードはエラーを含む最初のタブ ストリップの ID を取得します。

​
//Select all the tab strips
tabs = $("#tabStrip").find('div[id^=tabStrip]');
first_error_id = "";
//Loop through the tab strips looking for an input containing the error class
for(var i = 0; i < tabs.length; i+=1){
    if ($(tabs[i]).find('input.k-input.k-invalid').length > 0) {
        first_error_id = tabs[i].id;
        break;
    }
}
于 2012-06-15T08:06:15.720 に答える
1

input必要なクラスを持つ最初のフィールドのセレクターは次のようになります。

$('input.k-input.k-invalid:first').focus();

ただし、「入力フィールドにクラスが含まれている場合、タブのIDをこれに変更します」という意味がわかりません。

于 2012-06-15T07:35:48.823 に答える