jQuery.validate.unobtrusive.min.jsを変更せずにJQueryの控えめなメソッドをオーバーライドする方法

Question

jquery.validate.unobtrusive.jsのonErrorsメソッドをオーバーライドして、エラーメッセージをhtml要素へのハイパーリンクとして表示したいとします。しかし、jquery.validate.unobtrusive.jsのメソッドを変更したくないのは、新しいバージョンが利用可能になるとこのファイルが更新されるからです。私は、外部JSファイルを作成してそこにonErrors関数を含めることができることを読んだ。私のhtmlファイルで、jquery.validate.unobtrusive.jsをインクルードした後に外部JSファイルをインクルードすると、jquery.validate.unobtrusive.jsのメソッドが自動的にオーバーライドされます。これは起こっていない。

私はjquery.validate.unobtrusive.min.jsを使用しています。関数の名前は、onErrorsからkに変更されています。私は、外部JSファイルで 'k'という関数を作成しようとしましたが、そのような運はありません。

ありがとうございます！

Answer 1

両方の関数がグローバル名前空間に配置されていると、オーバーライドが発生することがあります。 jquery.validation.unobtrusive.jsの場合、onErrorsは他の関数の内部で宣言され、同じ名前の他の関数を宣言することで置き換えることはできません。

ソースコードを変更せずにその機能を変更する方法はないようです。

Answer 2

How can I customize the unobtrusive validation in ASP.NET MVC 3 to match my style?

あなたはそのオーバーライド以来、さまざまなオプションを提供することにより、デフォルトのonErrorsを変更することができます。 ソースコードを変更したり、組み込み関数をオーバーライドする必要はありません。

Answer 3

オリジナルのjquery.validate.unobtrusive.jsを変更する必要はありません。答えは次のようなものです：How can I customize the unobtrusive validation in ASP.NET MVC 3 to match my style?

しかし、あなたの実装でerrorPlacementを変更するだけで、おそらくエラーがあってもフォームが送信されることに注意してください。これを回避するには、jquery.validate.unobtrusive.jsのonError関数の内容を保持する必要があります。

あなたのファイルのいずれかにこのコードを入れてください：

var $form = $("form.edit-form") 
    var validator = $form.data('validator'); 

validator.settings.errorPlacement = $.proxy(onError, $form); 

function onError(error, inputElement) { 
    //Original code of the onError function inside jquery.validate.unobtrusive 
    //------------------------------------------------------------------------ 
    var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"), 
     replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false; 

    container.removeClass("field-validation-valid").addClass("field-validation-error"); 
    error.data("unobtrusiveContainer", container); 

    if (replace) { 
     container.empty(); 
     error.removeClass("input-validation-error"); 
    } 
    else { 
     error.hide(); 
    } 

    //END of Original code of the onError function inside jquery.validate.unobtrusive 
    //------------------------------------------------------------------------------- 

    //Do whatever you want here, in my case I'm using qTip to show the errors 
    var element = inputElement; 
    // Set positioning based on the elements position in the form 
    var elem = $(element); 

    // Check we have a valid error message 
    if (!error.is(':empty')) { 
     // Apply the tooltip only if it isn't valid 
     elem.filter(':not(.valid)').qtip({ 
      overwrite: false, 
      content: error, 
      position: { 
       my: 'left middle', 
       at: 'right middle', 
       viewport: $(window) 
      }, 
      show: { 
       event: false, 
       ready: true 
      }, 
      hide: false, 
      style: { 
       classes: 'ui-tooltip-red' // Make it red... the classic error colour! 
      } 
     }) 

     // If we have a tooltip on this element already, just update its content 
     .qtip('option', 'content.text', error); 
    } 

     // If the error is empty, remove the qTip 
    else { elem.qtip('destroy'); } 
}