jQuery Nhập và đánh dấu bằng Watermarked

Question

Trên trang HTML, tôi có một hộp nhập có 'hình mờ' trên nó khi nó trống. (ví dụ: "nhập văn bản ở đây ..."). Loại như thế này: http://digitalbush.com/projects/watermark-input-plugin/ - nhưng tùy chỉnh bằng văn bản.

Vấn đề là tôi không thể tìm ra cách xác thực trường này bằng plugin xác thực jQuery (http://docs.jquery.com/Plugins/Validation/) để nó xử lý văn bản mờ của tôi như thể trường trống.

Tôi không thể tìm thấy tùy chọn trong trình xác thực jQuery để cho phép tôi chỉ định quy tắc tùy chỉnh cho thời điểm trường hợp lệ, có trường hợp nào không? Tôi có thể tìm thấy các tùy chọn cho phép tôi chỉ định liệu một trường có cần để được xác thực dựa trên logic tùy chỉnh không, nhưng không phải cách xác thực nó.

Tôi đang thiếu gì?

Answer 1

Kiểm tra bài viết trên blog này:

http://randomactsofcoding.blogspot.com/2008/10/starting-with-jquery-how-to-write.html

Cho bạn biết làm thế nào để xây dựng một quy tắc xác nhận tùy chỉnh cho một lĩnh vực.

Answer 2

Nhờ Kazar cung cấp cho tôi với các liên kết, tôi đã đưa ra các giải pháp sau đây (nếu có ai quan tâm):

function notWatermark(value, element){ 
     return value != 'enter text...'; 
    } 

    $.validator.addMethod("notWatermark", notWatermark, "Field cannot be empty."); 

    $('#SearchForm').validate({ 
     rules: { 
      SomeField: { 
       required: true, 
       notWatermark: true 
      } 
     }, 

Answer 3

Khi sử dụng nhãn watermark duy nhất cho mỗi testboxes của bạn (Ví dụ 'nhập firstname', 'nhập họ' ...), bạn có thể cải thiện kịch bản để:

function noWatermark(value, element) { 
     return value.toLowerCase() != element.defaultValue.toLowerCase(); 
    } 

$.validator.addMethod("noWatermark", noWatermark, "required."); 

này cũng loại bỏ các văn bản mã hóa cứng từ kịch bản của bạn.

Answer 4

Tôi đang sử dụng plugin Watermark cho jQuery, nhưng hoàn cảnh của tôi cũng tương tự như:

http://code.google.com/p/jquery-watermark/

Nó sử dụng một classname cho việc hiển thị các hình mờ. (Tôi không chắc liệu phiên bản DigitalBrush có sử dụng một lớp hay không.) Tôi đã sửa đổi hàm trên để sử dụng hàm hasClass() của jQuery để xác định xem trường có được đánh giá là "trống" dựa trên các lớp được gán hiện tại hay không.

function notWatermark(value, element){ 
return !$(element).hasClass("waterMarkClass"); 
} 
$.validator.addMethod("notWatermark", notWatermark, "Required."); 

Answer 5

Không chắc chắn cách plugin xác thực hoạt động, nhưng đây là mô-đun riêng biệt có thể sử dụng được.

var SetWatermark = function(oElemToWatermark, sWatermark) 
    { 
     var CheckFocus = function(oEvent) 
     { 
     var oElem = $(this); 

     if (oElem.val() == oElem.data("Watermark")) 
      oElem.val("").css("color", ""); 
     } 

     var CheckBlur = function(oEvent) 
     { 
     var oElem = $(this); 

     if (oElem.val().length == 0) 
      oElem.val(oElem.data("Watermark")).css("color", "Grey"); 
     } 

     // HTML5 (simple route) 
     if (oElemToWatermark[0].placeholder != undefined) 
     oElemToWatermark[0].placeholder = sWatermark; 

     // pre HTML5 (manual route) 
     else if (oElemToWatermark.data("Watermark") == undefined) 
     oElemToWatermark .data("Watermark", sWatermark) 
          .val(sWatermark) 
          .on("focus", CheckFocus) 
          .on("blur", CheckBlur ); 
    } 

    var GetWatermarkText = function(oElem) 
    { 
     if (oElem[0].plaeholder != undefined) 
     return oElem[0].placeholder; 
     else if (oElem.data("Watermark") != undefined) 
     return oElem.data("Watermark"); 
     else 
     { 
     alert("The element " + oElem[0].id + " does not have a Watermark value."); 
     return ""; 
     } 
    } 

    var GetWatermarkValue = function(oElem) 
    { 
     var sVal  = oElem.val(); 
     var sWatermark = oElem.data("Watermark"); 

     if (oElem[0].placeholder != undefined 
     || sWatermark    == undefined 
     || sWatermark    != sVal) 
     return sVal; 
     else if (sVal == sWatermark) 
     return ""; 
    }