jQuery Wprowadzone znakiem wodnym i sprawdzanie poprawności

Question

Na stronie HTML mam pole wejściowe, które ma "znak wodny" na nim, gdy jest puste. (np .: "wprowadź tutaj tekst ..."). Rodzaj w ten sposób: http://digitalbush.com/projects/watermark-input-plugin/ - ale niestandardowe napisane.

Problem polega na tym, że nie mogę wymyślić sposobu sprawdzenia poprawności tego pola za pomocą wtyczki sprawdzania poprawności jQuery (http://docs.jquery.com/Plugins/Validation/), aby traktował mój tekst znaku wodnego tak, jakby pole było puste.

Nie mogę znaleźć opcji w walidatorze jQuery, aby pozwolić mi określić niestandardową regułę, gdy pole jest ważne, czy istnieje? Mogłem znaleźć opcje, które pozwalają mi określić, czy pole musi być sprawdzone na podstawie niestandardowej logiki, ale nie w jaki sposób powinno być sprawdzane.

Czego mi brakuje?

Answer 1

Sprawdź tę blogu:

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

Informuje, jak skonstruować niestandardową regułę sprawdzania poprawności dla pola.

Answer 2

Dzięki Kazar za dostarczenie mi link, wymyśliłem następujące rozwiązanie (jeśli ktoś jest zainteresowany):

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

Przy zastosowaniu unikalnych etykiet znaku wodnego dla każdego z testboxes (Na przykład „enter imię”,«podaj nazwisko»...), można poprawić skrypt:

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

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

usuwa również tekst sztywno ze skryptu.

Answer 4

Używam plugin wodny dla jQuery, ale moja sytuacja była podobna:

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

Używa classname do wyświetlania znaku wodnego. (Nie jestem pewien, czy wersja DigitalBrush używa klasy, czy nie.) Zmodyfikowałem powyższą funkcję, aby użyć funkcji hasClass() jQuery, aby określić, czy pole jest oceniane jako "puste" na podstawie aktualnie przypisanych klas.

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

Answer 5

Nie wiem, jak działa wtyczka sprawdzania poprawności, ale jest to osobny moduł, który można użyć.

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