Question

我有一个页面上有jQuery UI标签，第一个标签上有一个必填字段。验证有效，如果用户未输入值，则验证消息将显示在字段旁边。但是，如果用户不在第一个选项卡上，则该字段无效是不明显的。

在这种情况下，我想显示第一个标签，但我不知道如何为“无效”事件注册回调，如果有的话。

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

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

我感觉有点失落，所以任何帮助都会受到赞赏！

修改

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

Answer 1

此代码取自here，可以满足您的需求：

<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>

它将带您到第一个出错的标签。它在我正在开发的项目中工作得很好......

Answer 2

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

$("#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();
});

Answer 3

尝试向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>

这个脚本的目标是遍历“选项卡内容”中的每个div，查找“field-validation-error”类（只有在出现错误时才存在），如果找到此类则更改关联的Tab Nav项的颜色（即选项卡内容的id与tab选项卡项的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));

我希望这对你有意义。

Answer 4

您可能希望search获取errorPlacement（）函数

Answer 5

以下是适合我的解决方案：

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

在ASP.NET MVC 3中使用不显眼的验证，如何在表单无效时采取措施？

5 个答案: