JQuery Водяной знак ввода и проверки

Question

На странице HTML у меня есть поле ввода с водяным знаком, когда оно пустое. (например: «введите текст здесь ...»). Вроде как это: http://digitalbush.com/projects/watermark-input-plugin/ - но на заказ написано.

Проблема в том, что я не могу понять, как проверить это поле с помощью плагина проверки jQuery (http://docs.jquery.com/Plugins/Validation/), чтобы он обрабатывал мой текст водяного знака, как если бы поле было пустым.

Я не могу найти опцию в валидаторе jQuery, чтобы позволить мне указать пользовательское правило для того, когда поле действительно, есть ли оно? Я мог найти опции, которые позволяют мне указать, нужно ли для поля проверяться на основе пользовательской логики, а не как это нужно проверять.

Чего мне не хватает?

Answer 1

Спасибо, что Казар предоставил мне ссылку, я предложил следующее решение (если кому-то интересно):

    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 2

Я использую плагин Watermark для jQuery, но моя ситуация была похожа:

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

Используется имя класса для отображения водяного знака. (Я не уверен, использует ли версия DigitalBrush класс или нет.) Я модифицировал вышеупомянутую функцию, чтобы использовать функцию hasClass () jQuery, чтобы определить, оценивается ли поле как «пустое» на основе назначенных в настоящее время классов.

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

Answer 3

Проверьте это сообщение в блоге:

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

Сообщает, как создать настраиваемое правило проверки для поля.

Answer 4

При использовании уникальных меток водяных знаков для каждого из ваших тест-боксов (например, «введите имя», «введите фамилию» ...), вы можете улучшить скрипт до:

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

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

Это также удаляет жестко закодированный текст из вашего скрипта.

Answer 5

Не уверен, как работает плагин проверки, но это отдельный модуль, который можно использовать.

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