Xác nhận Knockout và Qtip

Question

Tôi hiện đang sử dụng Xác thực Jquery và Qtip để xử lý xác thực và hiển thị thông tin trên màn hình bằng cách sử dụng thông báo kiểu công cụ đẹp mắt khi lỗi xác thực sử dụng thành phần errorPlacement của các tùy chọn xác thực.

Hiện tại mỗi chế độ xemModel có phương thức tùy chỉnh riêng để thiết lập và khởi động xác thực và gọi lại, tuy nhiên tôi đang cố gắng xem xét cách thực hiện tốt hơn, có thể thêm ràng buộc tùy chỉnh để thiết lập quy tắc xác thực của tôi qua ràng buộc dữ liệu hoặc một cách khác, nhưng vẫn cho kết quả tương tự (tức là errorPlacement được kích hoạt khi lỗi xác thực xảy ra và cho Qtip hiển thị lỗi cho phần tử đã cho). Bây giờ trước khi tôi bắt đầu làm một bản thân mình, tôi chỉ cần kiểm tra trực tuyến và tìm thấy Knockout Validation, mà ban đầu tôi nghĩ là một ý tưởng tuyệt vời, tôi có thể áp dụng logic xác thực của mình trực tiếp vào dữ liệu trong viewModel của tôi và sau đó chỉ cần tìm một số loại gọi lại nhận được Qtip để kick in, tuy nhiên có vẻ như không có callback mà tôi có thể tìm thấy tài liệu. Thư viện dường như làm mọi thứ tôi muốn cho mặt xác thực của mọi thứ, không chỉ cho khía cạnh hiển thị của mọi thứ. Tôi đã xem qua mã nguồn và các ví dụ nhưng không thể thấy bất kỳ điều gì khác ngoài ko.validation.group (viewModel), điều này sẽ cho tôi một lỗi có thể quan sát được, nhưng tôi không chắc liệu tôi có thể sử dụng cách này giống như tôi mong đợi.

Dưới đây là một ví dụ về cách xác nhận hiện tại của tôi xảy ra:

/*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, }); 
    }; 
} 

Tôi hiện chắc chắn tôi có thể loại bỏ sự cần thiết của phương pháp quy tắc xác nhận bằng cách thêm một ràng buộc để tôi có thể thiết lập xác nhận trong các dữ liệu tùy chỉnh -bind, tuy nhiên nếu có thể tôi muốn sử dụng cùng một loại phương thức gọi lại với ràng buộc Knockout-Validation hiện có.

Answer 1

Tôi chưa sử dụng Xác thực Knockout cụ thể nhưng tôi đã viết một cái gì đó tương tự trong quá khứ. Xem lướt qua nguồn cho biết mỗi quan sát được mở rộng nhận được có thể quan sát phụisValid. Điều này có thể được sử dụng để ẩn các tin nhắn hiển thị trong đánh dấu của bạn bằng cách sử dụng các ràng buộc có thể nhìn thấy thông thường.

Để QTip hoạt động, bạn có thể đăng ký thuộc tính isValid này và thực hiện khởi tạo cần thiết để hiển thị/ẩn QTip khi được kích hoạt.

EDIT

Dưới đây là một ví dụ để giúp bạn bắt đầu

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

Tôi đã chỉnh sửa bài đăng của madcapnmckay, nhưng sự khác biệt đã trở nên đủ quan trọng để tôi nghĩ rằng câu trả lời mới là cần thiết.

Nó dựa nhiều vào bài đăng của madcapnmckay, nhưng nó sửa lỗi do MorganTiley chỉ ra. Bản gốc chỉ hoạt động nếu người dùng đã sửa đổi có thể quan sát được. Nếu họ không có thì mã không bao giờ bị sa thải. Vì vậy, tôi đã sửa đổi nó để nó kích hoạt mã công cụ khi nó được tạo ra, ngoài ra khi nó thay đổi.

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

Một nhược điểm là các tooltip sẽ hiển thị trên di chuột trước khi xác nhận loại trực tiếp đã được chạy (Ví dụ, bạn có một "yêu cầu" xác nhận trên một lĩnh vực, trước khi bạn nhấn nộp một tooltip sẽ hiển thị rằng lĩnh vực này là bắt buộc, nhưng trường sẽ không đánh dấu màu hồng). Tuy nhiên, khi bạn thay đổi trường, chú giải công cụ sẽ biến mất nếu trường hợp lệ.

Ứng dụng của tôi không sử dụng qtip, mà là Twitter Bootstrap Tooltip, vì vậy, đây cũng là mã cho điều đó.

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