qTipとMVC3の統合とjQueryの検証（errorPlacement）

Question

私はMVC3でproyectに取り組んでいます。浮動小数点のヒントとしてエラーを表示するために、qTip2とjQueryの検証を統合しようとしています。私が抱えている問題は、明らかにフォーム検証でerrorPlacementを呼び出すことは何もしていないことです。MVCがそれを処理する方法と関係があると思います。

基本的には、MVC3とjQuery（注釈）の統合検証を使用するだけですが、qTipと統合してエラーmsgの表示方法を変更することもできます。

jquery.validate.unobtrusive.js - onError関数の変更を提案している人がいましたが、それをチェックして正しく修正する方法が分からず、既存のスクリプトを変更する必要はありませんでした。

ありがとうございました。私がこれまで持って何

：

マイモデル：私の見解で

public class User 
{ 
    [Required] 
    public string Id { get; set; } 

     [Required] 
    [DataType(DataType.EmailAddress)] 
    public string Email { get; set; } 

    public string FirstName { get; set; } 

    public string SecondName { get; set; } 

    public string LastName { get; set; } 
} 

私のjavascript：

$('#Form').validate({ 
    errorClass: "errormessage", 
    errorClass: 'error', 
    validClass: 'valid', 
    errorPlacement: function (error, element) { 
     // Set positioning based on the elements position in the form 
     var elem = $(element), 
      corners = ['left center', 'right center'], 
      flipIt = elem.parents('span.right').length > 0; 

     // Check we have a valid error message 
     if (true) { 
      // Apply the tooltip only if it isn't valid 
      elem.filter(':not(.valid)').qtip({ 
       overwrite: false, 
       content: error, 
       position: { 
        my: corners[flipIt ? 0 : 1], 
        at: corners[flipIt ? 1 : 0], 
        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'); } 
    }, 
    success: $.noop // Odd workaround for errorPlacement not firing! 
}) 

$('#Form').submit(function() { 
    if (!$(this).valid()) 
     return false; 

    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     beforeSend: function() { 
     }, 
     success: function (result) { 
     }, 
     error: function (result) { 
     } 
    }); 
    return false; 
}); 

Answer 1

代替ソリューション

私の最初のソリューションを働いたが、また、特定の状況では、いくつかの予期しないbehaiviorを引き起こしました。私は同じのjsファイルにのonError機能にerrorPlacementコードを含むことによって固定：

function onError(error, inputElement) { // 'this' is the form element 
    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").appendTo(container); 
    } 
    else { 
     error.hide(); 
    } 

    var element = inputElement; 
    // Set positioning based on the elements position in the form 
    var elem = $(element), 
         corners = ['left center', 'right center'], 
         flipIt = elem.parents('span.right').length > 0; 

    // 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: corners[flipIt ? 0 : 1], 
       at: corners[flipIt ? 1 : 0], 
       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'); } 
} 

そしてあなたは、検証のために、この方法を確認し、フォームを送信することができます

$('#frm').submit(function() { 
    if (!$(this).valid()) 
     return false; 

    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     beforeSend: function() { 
     }, 
     success: function (result) { 
     }, 
     error: function (result) { 
     } 
    }); 
    return false; 
}); 

Answer 2

は、参考のために掲載...答えを見つけました。

1）まず、マイクロソフトが提供するスクリプトjquery.validate.unobtrusive.jsを探します。

2）第二に、スクリプトに機能validationInfo（フォーム）を見つけ、Qティップが提供するもの、またはお好みのいずれかとオプションの構造でerrorPlacement命令を交換してください。

3）同じ方法で、検証の処理方法を変更したいと思う。

4）必要なファイルがすべて含まれています。

これは、同様の問題を抱えている人に役立ちます。

コード例：

function validationInfo(form) { 
    var $form = $(form), 
     result = $form.data(data_validation); 

    if (!result) { 
     result = { 
      options: { // options structure passed to jQuery Validate's validate() method 
       //errorClass: "input-validation-error", 
       errorClass: "error", 
       errorElement: "span", 
       //errorPlacement: $.proxy(onError, form), 
       errorPlacement: function (onError, form) { 
        var error = onError; 
        var element = form; 
        // Set positioning based on the elements position in the form 
        var elem = $(element), 
         corners = ['left center', 'right center'], 
         flipIt = elem.parents('span.right').length > 0; 

        // 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: corners[flipIt ? 0 : 1], 
           at: corners[flipIt ? 1 : 0], 
           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'); } 
       }, 
       invalidHandler: $.proxy(onErrors, form), 
       messages: {}, 
       rules: {}, 
       success: $.proxy(onSuccess, form) 
      }, 
      attachValidation: function() { 
       $form.validate(this.options); 
      }, 
      validate: function() { // a validation function that is called by unobtrusive Ajax 
       $form.validate(); 
       return $form.valid(); 
      } 
     }; 
     $form.data(data_validation, result); 
    } 

    return result; 
} 

Answer 3

グレートソリューションのおかげで私はこのアプリケーションを私のアプリケーションに使ってきました。

... jquery.validate.unobtrusive.min.jsファイルを直接変更するのではなく、次のものを使用して控えめな検証のデフォルト動作を変更しました。

$(document).ready(function() { 

      var settngs = $.data($('form')[0], 'validator').settings; 
      settngs.errorPlacement = function(error, inputElement) { 
       // Modify error placement here 
      }; 
}); 

Eagerly Performing ASP.NET MVC 3 Unobtrusive Client Side Validation

Answer 4

私のソリューション - マスターページに配置された別の.jsファイルにしている場合に使用することができ、サイト全体のために働きます。 Mantisimo & AJCの回答（彼のおかげで）で

$(document).ready(function() { 
    //validation - make sure this is included after jquery.validate.unobtrusive.js 
    //unobtrusive validate plugin overrides all defaults, so override them again 
    $('form').each(function() { 
     OverrideUnobtrusiveSettings(this); 
    }); 
    //in case someone calls $.validator.unobtrusive.parse, override it also 
    var oldUnobtrusiveParse = $.validator.unobtrusive.parse; 
    $.validator.unobtrusive.parse = function (selector) { 
     oldUnobtrusiveParse(selector); 
     $('form').each(function() { 
      OverrideUnobtrusiveSettings(this); 
     }); 
    }; 
    //replace validation settings function 
    function OverrideUnobtrusiveSettings(formElement) { 
     var settngs = $.data(formElement, 'validator').settings; 
     //standard qTip2 stuff copied from sample 
     settngs.errorPlacement = function (error, element) { 
      // 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: 'center left', // Position my top left... 
         at: 'center right', // at the bottom right of... 
         viewport: $(window) 
        }, 
        show: { 
         event: false, 
         ready: true 
        }, 
        hide: false, 
        style: { 
         classes: 'qtip-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'); } 
     }; 

     settngs.success = $.noop; 
    } 
}); 

Answer 5

、私は次のスクリプトを書いて、それはOKだとそれが何の問題もなく動作しますが、それぞれ提出する形で次のようjquery.validate.unobtrusive.jsでエラーが発生します：

$(document).ready(function() { 
    var $forms = $.data($('form')[0], 'validator'); 
    if ($forms == undefined) return; 
    var settngs = $forms.settings; 
    settngs.errorPlacement = function (error, inputElement) { 
     var element = inputElement; 
     var elem = $(element), 
      corners = ['left center', 'right center'], 
      flipIt = elem.parents('span.right').length > 0; 
     if (!error.is(':empty')) { 
      elem.filter(':not(.valid)').qtip({ 
       overwrite: false, 
       content: error, 
       position: { 
        my: corners[flipIt ? 0 : 1], 
        at: corners[flipIt ? 1 : 0], 
        viewport: $(window) 
       }, 
       show: { 
        event: false, 
        ready: true 
       }, 
       hide: false, 
       style: { 
        classes: 'qtip-red', 
       } 
      }) 
      .qtip('option', 'content.text', error); 
     } 
     else { elem.qtip('destroy'); } 
    }; 
}); 

私はMVC 5でテストされ、用2.2.0