jQuery ingresso filigranata e validazione

Question

In una pagina HTML che hanno un InputBox che ha un 'filigrana' su di esso quando è vuoto. (es .: "inserisci il testo qui ..."). Un po 'come questo: http://digitalbush.com/projects/watermark-input-plugin/ - ma personalizzato scritto.

Il problema è che non riesco a capire come convalidare questo campo con il plugin di convalida jQuery (http://docs.jquery.com/Plugins/Validation/) in modo che tratta il mio testo filigrana come se il campo fosse vuoto.

Non riesco a trovare un'opzione nel validatore jQuery per farmi specificare una regola personalizzata per quando un campo è valida, c'è uno? Sono riuscito a trovare le opzioni che mi permettono di specificare se un campo bisogno da convalidare in base a una logica personalizzata, ma non come dovrebbe essere convalidato.

Cosa mi manca?

Answer 1

Partenza questo post del blog:

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

spiega come costruire una regola di convalida personalizzato per un campo.

Answer 2

Grazie a Kazar per avermi fornito il link, mi si avvicinò con la seguente soluzione (se qualcuno è interessato):

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

Quando si utilizzano etichette filigrana uniche per ognuno dei vostri testboxes (ad esempio 'enter nome', 'inserisci il cognome' ...), si potrebbe migliorare lo script:

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

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

Ciò elimina anche il testo codificato nel vostro script.

Answer 4

sto usando il plugin Watermark per jQuery, ma la mia situazione era simile:

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

utilizza un nome di classe per la visualizzazione della filigrana. (Non sono sicuro che la versione di DigitalBrush utilizzi o meno una classe.) Ho modificato la funzione precedente per utilizzare la funzione hasClass() di jQuery per determinare se il campo viene valutato come "vuoto" in base alle classi attualmente assegnate.

Answer 5

Non so come funziona il plugin di convalida, ma questo è un modulo separato che è utilizzabile.

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