顯示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-14 ckittel

你的解決方案几乎工作，我正在尋找相同的解決方案。我遇到的問題是，當您更正錯誤並返回重新驗證時，列表不會更新。 – 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? 
     } 
    }); 
}

來源

2011-06-30 14:28:05 ckittel

你也許可以這樣做： $（'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>

來源

2014-03-29 04:59:19

顯示MVC3不顯眼的驗證jQuery UI對話框中的總結錯誤

回答

相關問題