entrada y validación de jQuery Watermarked

Question

En una página HTML, tengo una casilla de entrada que tiene una 'marca de agua' cuando está vacía. (p. ej .: "ingresar texto aquí ..."). Algo como esto: http://digitalbush.com/projects/watermark-input-plugin/ - pero escrito a medida.

El problema es que no puedo averiguar cómo validar este campo con el complemento de validación de jQuery (http://docs.jquery.com/Plugins/Validation/) para que trate el texto de mi marca de agua como si el campo estuviera vacío.

No puedo encontrar una opción en el validador jQuery que me permita especificar una regla personalizada para cuando un campo es válido, ¿hay alguno? Pude encontrar opciones que me permiten especificar si un campo necesita para ser validado en base a la lógica personalizada, pero no cómo debe validarse.

¿Qué me estoy perdiendo?

Answer 1

Salida esta entrada del blog:

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

se explica cómo construir una regla de validación personalizada para un campo.

Answer 2

Gracias a Kazar para proporcionar mí con el enlace, me ocurrió la siguiente solución (si alguien está interesado):

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

Al utilizar etiquetas de marca de agua únicas para cada uno de sus testboxes (Por ejemplo, 'enter nombre', 'escriba el apellido' ...), se podría mejorar el guión a:

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

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

Esto también elimina el texto codificado a partir de la secuencia de comandos.

Answer 4

estoy usando el plugin para jQuery Marca de agua, pero mi situación era similar:

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

Se utiliza un nombre de clase para la visualización de la marca de agua. (No estoy seguro si la versión de DigitalBrush usa una clase o no). He modificado la función anterior para usar la función jCuery's hasClass() para determinar si el campo se evalúa o no como "vacío" en función de las clases actualmente asignadas.

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

Answer 5

No estoy seguro de cómo funciona el complemento de validación, pero este es un módulo separado que se puede usar.

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