2011-08-10 13 views
8

解決策を使用して、hereと表示され、qTip jQueryプラグインを使用してクライアント側の検証エラーをツールチップに表示しています。このソリューションはクライアント側の検証には効果的ですが、同じ方法でサーバー側の検証エラーを表示することができれば幸いです。誰もがqTipを利用してツールチップでサーバー側の検証エラーを表示する方法を知っていますか?そのクラスを持つすべての要素の上に私たちができるだけでループクラスのフィールド・バリデーション・エラー 'とspan要素が存在することになるページが読み込まqTip jQueryプラグインを使用したASP.NET MVC検証

おかげ

答えて

12

サーバー側の検証エラーがある場合は、内容またはエラーメッセージを抽出し、ツールチップに表示します。

$(document).ready(function() { 
    // Run this function for all validation error messages 
    $('.field-validation-error').each(function() { 

     // Get the name of the element the error message is intended for 
     // Note: ASP.NET MVC replaces the '[', ']', and '.' characters with an 
     // underscore but the data-valmsg-for value will have the original characters 
     var inputElem = '#' + $(this).attr('data-valmsg-for').replace('.', '_').replace('[', '_').replace(']', '_'); 

     var corners = ['left center', 'right center']; 
     var flipIt = $(inputElem).parents('span.right').length > 0; 

     // Hide the default validation error 
     $(this).addClass('Hidden'); 

     // Show the validation error using qTip 
     $(inputElem).filter(':not(.valid)').qtip({     
      content: { text: $(this).text() } , // Set the content to be the error message 
      position: { 
       my: corners[flipIt ? 0 : 1], 
       at: corners[flipIt ? 1 : 0], 
       viewport: $(window) 
      }, 
      show: { ready: true }, 
      hide: false,     
      style: { classes: 'ui-tooltip-red' } 
     });    
    }); 
}); 

詳細は、この方法を説明したblog postです。

0

Nick Olsenが投稿した解決策はすごく効果的です! 一つの観察:

var inputElem = "#" + $(this).attr("data-valmsg-for").replace(/\./g,"_").replace(/[\[\]]/g, "_"); 

.replace()この文で使用するには、唯一のラインのようなものでなければなりませんすべての出現を置き換えるために‘.’‘['']‘

var inputElem = ‘#’ + $(this).attr(‘data-valmsg-for’).replace(‘.’, ‘_’).replace(‘[', '_').replace(']‘, ‘_’); 

の最初の出現を置き換えます

関連する問題