Integracja qTip z MVC3 i jQuery Validation (errorPlacement)

Question

Pracuję nad programem proyect z MVC3 i próbuję zintegrować qTip2 z walidacją jQuery, aby pokazać błędy jako pływające wskazówki. Problem, który mam, polega na tym, że najwyraźniej wywoływanie błędu błędu przy sprawdzaniu poprawności formularza nic nie robi, domyślam się, że ma to coś wspólnego ze sposobem, w jaki to robi MVC.

Zasadniczo chcę użyć zintegrowanego sprawdzania poprawności między MVC3 i jQuery (adnotacje), ale także zintegrować z qTip, aby zmienić sposób wyświetlania komunikatów o błędach.

Przeszukałem wszystko, a najlepsze, co mogłem znaleźć, to sugestia modyfikująca jquery.validate.unobtrusive.js - funkcja onError, ale sprawdziłam go i nie miałam pojęcia, jak go właściwie zmodyfikować, a także wolę rozwiązanie, które nie wymagało ode mnie zmiany istniejących skryptów.

Dziękuję za pomoc.

Co mam tak daleko:

Moja Model:

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; } 
} 

Moje javascript moim zdaniem:

$('#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

Rozwiązanie alternatywne

My pierwsze rozwiązanie działa, ale spowodowały również niespodziewane behaivior w konkretnej sytuacji. Naprawiłem włączając kod errorPlacement na funkcję onError w tym samym pliku JS:

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'); } 
} 

a następnie można przesłać formularza, sprawdzania walidacji w ten sposób:

$('#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

znaleźć odpowiedź ... opublikowania w celach informacyjnych.

1) Najpierw zlokalizuj skrypt jquery.validate.unobtrusive.js dostarczony przez firmę microsoft.

2) Po drugie, na skrypcie zlokalizować funkcji validationInfo (formularz) i wymienić errorPlacement dyspozycję w strukturze opcji z jednej dostarczonych przez Q-Tip, lub którykolwiek z wyboru.

3) To samo dotyczy stylu i innych opcji, które chcesz zmienić w sposobie obsługi sprawdzania poprawności.

4) Wymagane są wszystkie niezbędne pliki.

Mam nadzieję, że pomoże to komuś, kto ma podobny problem.

Przykład Kod:

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

świetne rozwiązanie dzięki , Użyłem tego w mojej aplikacji.

... Aby dodatkowo dodać, zamiast modyfikować bezpośrednio plik jquery.validate.unobtrusive.min.js, zmodyfikowałem domyślne zachowanie dyskretnego sprawdzania poprawności.

$(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

Moje rozwiązanie - może być używany w pliku .js i jeżeli odrębne umieszczony na stronie głównej, pracuje dla całej witryny.

$(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

Z Mantisimo & AJC odpowiedzi (dzięki nim), napisałem poniższy skrypt, to jest OK i to działa bez żadnych problemów, ale jquery.validate.unobtrusive.js zgłasza błąd jako następujące w każdej zgłaszającej postaci:

$(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'); } 
    }; 
}); 

Przetestowałem z MVC 5 i Q-Tip 2.2.0