6

我有一个带有 jQ​​uery UI 选项卡的页面，第一个选项卡上有一个必填字段。验证有效，如果用户没有输入值，验证消息会显示在字段旁边。但是，如果用户不在第一个选项卡上，则该字段无效并不明显。

在这种情况下，我想显示第一个选项卡，但我不确定如何为“无效”事件注册回调（如果有的话）。

我还考虑在选项卡上方显示验证摘要，无论用户在哪个选项卡上都可以看到该摘要，但我更喜欢将用户带到该字段。

我试过浏览 jquery.validate.unobtrusive.js 文件，它似乎扩展了 jquery.validate.js。查看 jquery.validate 的文档，我看到有一个invalidHandler选项可以传递给validate 方法，但我不知道如何使用它，因为该方法是由 jquery.validation.unobtrusive 调用的。

我在这里感觉有点失落，所以任何帮助将不胜感激！

编辑

我从来没有想出答案，但确实想出了一个解决方法，我在下面发布了。不过，我希望有人用更好的方法来回答这个问题。

4

5 回答 5

2

从这里获取的这段代码将做你想做的事：

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").submit(function () {
            $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id);
        });
    });
</script>

它会将您带到第一个有错误的选项卡。它在我正在开发的项目中运行良好......

于 2012-03-04T15:46:53.887 回答
1

我最终手动验证并提交了表单：

$("#save-button").button().click(function() {
    if (!$("#profile-form").valid()) {
        if ($("#tabs").tabs("option", "selected") > 0) {
            $("#tabs").tabs("option", "selected", 0);
        }
        return false;
    }
    $("#profile-form").submit();
});
于 2011-03-08T22:59:10.960 回答
1

尝试将新适配器添加到 Unobtrusive。

我的标记看起来不同，因为我使用 Telerik 而不是 JQuery UI 来创建选项卡。这是我的标记在通过 Validator 后的样子（即，通过 Unobtrusive 脚本插入了验证错误）

<div id="rItemTabs">

   <ul>
        <li><a href="#rItemTabs-1">Tab 1</a></li>
        <li><a href="#rItemTabs-2">Tab 2</a></li>
   </ul>
   <!-- End Tab Nav-->

   <!-- Begin Tab Contents -->
   <div id="rItemTabs-1">
       <div class="editor-label">
           <label for="Title">Title</label>
       </div>
       <div class="editor-field">
           <input id="Title" class="input-validation-error name="Title">
           <span class="field-validation-error">*</span>
       </div>
   </div> 

   <div id="rItemTabs-2">
       <div class="editor-label">
           <label for="Title">Title</label>
       </div>
       <div class="editor-field">
           <input id="Title" class="input-validation-error name="Title">
           <span class="field-validation-error">*</span>
       </div>
   </div>

</div>

该脚本的目标是遍历“Tab Contents”中的每个 div，查找“field-validation-error”类（仅在有错误时才应存在），如果找到该类，则更改颜色关联的 Tab Nav 项（即选项卡内容的 id 与选项卡导航项的 href 相同）。

$.validator.unobtrusive.adapters.add(
  'tab-validation',
   function () {
       var tabs = $('#rItemTabs [id*=rItemTabs]'); 
       $(tabs).each(function () {
       if ($(this).has('.field-validation-error').length) {
           var tabId = '#' + $(this).attr('id');
           $('a[href=' + tabId + ']').css({ 'color': 'red', 'font-weight': 'bolder' });
       }
   });
} (jQuery));

我希望这很有意义并且对你有用。

于 2011-10-19T21:31:25.767 回答
0

您可能想要搜索errorPlacement() 函数

于 2011-03-08T00:01:12.810 回答
0

这是对我有用的解决方案：

<button type="submit" onclick="ValidateRequired();">Save</button>

function ValidateRequired(){
    $(':input[required]', '#myForm').each(function(){
        if ($(this).val() == ''){
            var errorTab = $(this).closest('div').attr('id');
            $('#tabs').tabs('select', '#'+errorTab);
        }
    });
}
于 2013-09-18T06:42:27.883 回答