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 से प्रत्येक (उदाहरण के लिए के लिए अद्वितीय वॉटरमार्क लेबल का उपयोग करते समय 'दर्ज firstname ',' अंतिम नाम दर्ज '...), आप के लिए स्क्रिप्ट को बेहतर बना सकते:

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

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

यह भी अपनी स्क्रिप्ट से हार्डकोडेड पाठ को हटा।

Answer 4

मैं jQuery के लिए वॉटरमार्क प्लगइन का उपयोग कर रहा है, लेकिन मेरी स्थिति समान था:

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

यह वॉटरमार्क के प्रदर्शन के लिए एक classname उपयोग करता है। (मुझे यकीन नहीं है कि क्या डिजिटलब्रश संस्करण कक्षा का उपयोग करता है या नहीं।) मैंने उपर्युक्त फ़ंक्शन को jQuery के हैस्क्लास() फ़ंक्शन का उपयोग करने के लिए संशोधित किया है यह निर्धारित करने के लिए कि फ़ील्ड का मूल्यांकन वर्तमान में निर्दिष्ट कक्षाओं के आधार पर "खाली" के रूप में किया गया है या नहीं।

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

की