Sprawdzanie poprawności Knockout i Qtip

Question

Obecnie używam walidacji Jquery Validation i Qtip razem, aby poradzić sobie z faktycznym sprawdzaniem poprawności i wyświetlaniem informacji na ekranie za pomocą powiadomień o stylu powiadomień po błędach sprawdzania poprawności za pomocą składnika errorPlacement opcji sprawdzania poprawności.

Obecnie każdy model viewModel ma własną niestandardową metodę konfiguracji i uruchamiania sprawdzania poprawności i wywołań zwrotnych, jednak starałem się uzyskać lepszy sposób robienia tego, czy to dodawanie niestandardowego powiązania, aby skonfigurować moje reguły sprawdzania poprawności przez powiązań danych lub w inny sposób, ale nadal daje takie same wyniki (np. błąd jest wyzwalany, gdy pojawia się błąd sprawdzania poprawności i mówi Qtip, aby wyświetlał błąd dla danego elementu).

Teraz zanim zacząłem je tworzyć, właśnie sprawdziłem online i znalazłem Knockout Validation, który początkowo uważałem za świetny pomysł. Mogę zastosować moją logikę walidacji bezpośrednio do danych w moim viewModelu, a następnie znaleźć jakieś wywołanie zwrotne do spraw, aby Qtip się uruchomił, ale wygląda na to, że nie ma żadnego odwołania, które można udokumentować. Wydaje się, że biblioteka robi wszystko, co chcę, po stronie sprawdzania poprawności, po prostu nie po stronie wyświetlania. Przejrzałem kod źródłowy i przykłady, ale nie widziałem niczego poza ko.validation.group (viewModel), co dałoby mi możliwość zaobserwowania zawierającego błędy, ale nie jestem pewien, czy mógłbym użyć tego w taki sam sposób jak ja przy nadziei.

Oto przykład jak mój obecny walidacja dzieje:

/*globals $ ko */ 
function SomeViewModel() { 

    this.SetupValidation = function() { 
     var formValidationOptions = { 
      submitHandler: self.DoSomethingWhenValid, 
      success: $.noop, 
      errorPlacement: function (error, element) { 
       if (!error.is(':empty')) 
       { qtip.DoSomethingToDisplayValidationErrorForElement(element, error); } 
       else 
       { qtip.DoSomethingToHideValidationErrorForElement(element); } 
      } 
     }; 

     $(someForm).validate(formValidationOptions); 
     this.SetupValidationRules(); 
    }; 

    this.SetupValidationRules = function() { 
     $(someFormElement1).rules("add", { required: true, minlength: 6, maxlength: 20, alphaNumeric: true }); 
     $(someFormElement2).rules("add", { required: true, minlength: 6, maxlength: 20 }); 
     $(someFormElement3).rules("add", { required: true, email: true, }); 
    }; 
} 

Obecnie jestem pewien, że mogę usunąć potrzebę metody reguły poprawności dodając zwyczaj wiązania więc mogę ustawić walidacji w danych -indywidualnie, ale jeśli to możliwe, chciałbym użyć tego samego sposobu wywołania zwrotnego z istniejącym wiązaniem Knockout-Validation.

Answer 1

Nie użyłem Knockout-Validation specjalnie, ale napisałem coś podobnego w przeszłości. Szybki rzut oka na źródło pokazuje, że każdy rozszerzony obserwowalny otrzymuje pod-obserwowalne 2. Może to być wykorzystane do ukrycia wiadomości w twoim znaczniku za pomocą konwencjonalnych widocznych wiązań knockout.

Aby uzyskać obsługę QTip, niestandardowe powiązanie może zasubskrybować tę właściwośćValid i wykonać odpowiednią inicjalizację, aby pokazać/ukryć QTip po uruchomieniu.

EDIT

Oto przykład, jak zacząć grę

http://jsfiddle.net/madcapnmckay/hfcj7/

HTML:

<!-- Note that you have to reference the "qtipValMessage" binding --> 
<!-- using the "value" binding alone is not enough    --> 
<input data-bind="value: emailAddress, qtipValMessage : emailAddress" /> 

JS:

ko.bindingHandlers.qtipValMessage = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var observable = valueAccessor(), $element = $(element); 
     if (observable.isValid) { 
      observable.isValid.subscribe(function(valid) { 
       if (!valid) { 
        $element.qtip({ 
         overwrite: true, 
         content: { 
          text: observable.error 
         } 
        }); 
       } else { 
        $element.qtip("destroy"); 
       } 
      }); 
     } 
    } 
}; 

Answer 2

Edytowałem post madcapnmckay, ale różnice stały się na tyle znaczące, że potrzebuję nowej odpowiedzi.

Jest mocno oparty na postie madcapnmckay, ale naprawia błąd wskazany przez MorganTiley. Oryginał działa tylko wtedy, gdy użytkownik zmodyfikował obserwowalne. Jeśli tego nie zrobią, kod nigdy nie zostanie zwolniony. Zmodyfikowałem go tak, aby uruchamiał kod narzędzia, gdy zostanie utworzony, oprócz tego, kiedy się zmieni.

ko.bindingHandlers.qtipValMessage = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var observable = valueAccessor(), $element = $(element); 
     if (observable.isValid) { 
      var updateTooltip = function (valid) { 
       if (!valid) { 
        $element.qtip({ 
         overwrite: true, 
         content: { 
          text: observable.error 
         } 
        }); 
       } else { 
        $element.qtip("destroy"); 
       } 
      } 
      updateTooltip(); 
      observable.isValid.subscribe(updateTooltip); 
     } 
    } 
}; 

Jedynym minusem jest to, że etykietka wyświetli przy aktywowaniu przed walidacja nokaut został uruchomiony (przykład, masz „wymagane” walidacji na polu, przed naciśnięciem złożyć podpowiedź wyświetla mówiąc, że pole jest wymagane, ale pole nie będzie podświetlone na różowo). Po zmianie pola etykieta narzędziowa zniknie, jeśli pole jest prawidłowe.

Moja aplikacja nie używała qtip, ale raczej etykiety na Twitterze Bootstrap, więc tutaj też jest kod.

ko.bindingHandlers.invalidTooltip = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var observable = valueAccessor(), $element = $(element); 
     if (observable.isValid) { 
      var updateTooltip = function (valid) { 
       if (!valid) { 
        $element.attr("data-original-title", observable.error); 
        $element.tooltip(); 

       } else { 
        $element.tooltip("destroy"); 
       } 
      } 
      updateTooltip(); 
      observable.isValid.subscribe(updateTooltip); 
     } 
    } 
};