显示MVC3不显眼的验证jQuery UI对话框中的总结错误

问题描述：

我期待在jQuery UI对话框中显示MVC3的不显眼的ValidationSummary错误。具体来说，我希望能够有一个“活”的经验。也就是说，无论MVC3客户端验证何时（第一次）或更新（重复攻击）.validation-summary-errors元素，我都希望结果出现在jQuery UI对话框中。显示MVC3不显眼的验证jQuery UI对话框中的总结错误

我现在有沿

@Using Html.BeginForm("Action", "Controller", FormMethod.Post, New With {.id = "MyForm"}) 
    @Html.ValidationSummary() 
... 

$('#MyForm').submit(function() { 
    if (!$(this).valid()) { 
     $('.validation-summary-errors').dialog(...); 
     return false; 
    } 
});

线的东西，但这并不觉得我的权利。

感觉就像我应该能够挂钩验证框架并被通知验证已完成，并且出现了错误摘要，现在显示或更新错误。然后使用该事件，dialog()现在显示/更新.validation-summary-errors元素。有这样的事吗？或者还有其他建议吗？

你的解决方案几乎工作，我正在寻找相同的解决方案。我遇到的问题是，当您更正错误并返回重新验证时，列表不会更新。 – 2011-06-24 14:02:02

@Richard B：同意这个解决方案几乎只适用于提交，但ajax文章。 – 2011-06-29 22:12:04

答

所以这就是我最终这样做的结果。我没有找到很多文档，但做了足够的JS挖掘来达到这一点。不知道我对此感觉如何。我知道我不再需要挂钩表单的submit事件和验证呼叫的“双重”，所以这很好。看起来这个解决方案似乎感觉“神秘”（至少在我的经验不足的眼睛里），而且我预料到（并且仍在寻找）一种感觉更好的解决方案。

$(function() { 
    // If there is an error element already (server side error), show it. 
    showValidationSummaryDialog(); 

    // When the form validates, and there is an error element, show it 
    $('#MyForm').bind('invalid-form.validate', function (error, element) { 
     showValidationSummaryDialog(); 
    } 
} 

function showValidationSummaryDialog() { 
    $('.validation-summary-errors').dialog({ 
     title: 'Unable to Save', 
     close: function() { 
      $(this).dialog('destroy') 
          .prependTo($('#MyForm')); // jQuery moves the source element out of the DOM. 
                // We need to put it back in its place afterwards for validation to maintain its contents. 
                // TODO: Is there a better way? 
     } 
    }); 
}

你也许可以这样做： $（'form'）。validate（function（）{your code here}）。trigger（“validate”）; – PilotBob 2012-05-03 16:31:37

在MVC4中，jquery 1.11，prependTo似乎不再必要。 – 2015-05-21 23:18:16

答

如果有人想同时显示ValidationSummary & ValidationSummaryDialog那就试试这个。

根据@ckittel。

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary() 
    <div id="ValidationSummary" style="display:none" class="validation-summary-errors"> 
    </div> 
} 


<script type="text/javascript"> 

    function showValidationSummaryDialog() { 
     $('#ValidationSummary').html($('.validation-summary-errors').html()); 

     $('#ValidationSummary').dialog({ 
      title: 'Error', 
      modal: true 
     }); 
    } 

    $(document).ready(function() { 
     $('form').bind('invalid-form.validate', function (error, element) { 
      showValidationSummaryDialog(); 
     }); 
    }); 

</script>

显示MVC3不显眼的验证jQuery UI对话框中的总结错误

相关推荐