jQueryウォーターマーク付きの入力と検証

Question

HTMLページには、空のときに「透かし」を持つ入力ボックスがあります。 （例：「ここにテキストを入力...」）。このような種類の：http://digitalbush.com/projects/watermark-input-plugin/ - しかし、カスタム書かれています。

問題は、このフィールドをjQuery検証プラグイン（http://docs.jquery.com/Plugins/Validation/）で検証して、ウォーターマークテキストをフィールドが空であるかのように扱うことができないことです。

フィールドが有効なときにカスタムルールを指定できるようにするオプションがjQueryバリデータで見つかりません。私はフィールドががカスタムロジックに基づいて検証される必要があるかどうかを指定できるオプションを見つけることができますが、どのように検証するべきかは指定できません。

私には何が欠けていますか？

Answer 1

は、このブログの記事をチェックアウト：

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

をフィールドのカスタム検証ルールを構築する方法を説明します。

Answer 2

（誰もが興味を持っている場合）、リンクを私に提供するためのKazarのおかげで、私は、次の解決策を考え出した：

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

（たとえば「を入力し、あなたのtestboxesごとに固有の透かしラベルを使用している場合また、これは、スクリプトからのハードコードされたテキストを削除し

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

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

：FIRSTNAME」、 『）...』姓を入力し、あなたがに、スクリプトを向上させることができます。

Answer 4

私はjQueryのためのウォーターマークプラグインを使用していますが、私の状況は類似していた：

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

それは、透かしを表示するためのクラス名を使用しています。 （私はDigitalBrushバージョンがクラスを使用しているかどうか分かりません）jQueryのhasClass（）関数を使って、フィールドが現在割り当てられているクラスに基づいて "空"として評価されるかどうかを判断するように変更しました。

function notWatermark(value, element){ 
return !$(element).hasClass("waterMarkClass"); 
} 
$.validator.addMethod("notWatermark", notWatermark, "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 ""; 
    }