jQuery Wasserzeichen Eingabe und Validierung

Auf einer HTML-Seite ich habe eine inputbox, die hat ein 'Wasserzeichen' auf, wenn es leer ist. (zB: "hier text eingeben..."). Art wie dieses: http://digitalbush.com/projects/watermark-input-plugin/ - aber benutzerdefinierte geschrieben.

Das problem ist, dass ich kann nicht herausfinden, wie überprüft wird dieses Feld mit dem jQuery-validation-plugin ( http://docs.jquery.com/Plugins/Validation/ ), so dass es behandelt mein Wasserzeichen text, wenn das Feld leer war.

Ich kann nicht finden, eine option in der jQuery validator, lassen Sie mich geben Sie eine benutzerdefinierte Regel, Wann ein Feld gültig ist, gibt es die? Ich finden konnte, die Optionen, die mir erlauben, um anzugeben, ob ein Feld muss werden validiert basierend auf benutzerdefinierten Logik, aber nicht, wie es sollte validiert werden.

Was bin ich?

InformationsquelleAutor andreialecu | 2009-06-04
  1. 3

    Schauen Sie sich dieses blog-post:

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

    Erzählt Sie Informationen zum erstellen einer benutzerdefinierten Gültigkeitsregel für ein Feld.

    • Danke, ich habe herausgefunden, eine Lösung, basierend auf Ihren link.
    • Gerade bemerkt, die Antwort. Vielen Dank für das posten Sie den link und finden es nützlich!
    InformationsquelleAutor Kazar
  2. 6

    Dank Kazar für die Bereitstellung von mir mit dem link, kam ich auf folgende Lösung (wenn jemand interessiert ist):

        function notWatermark(value, element){
        return value != 'enter text...';
    }

    $.validator.addMethod("notWatermark", notWatermark, "Field cannot be empty.");

    $('#SearchForm').validate({
        rules: {
            SomeField: {
                required: true,
                notWatermark: true
            }
         },
    • Nur ein Punkt - wenn jemand Typen "text eingeben..." in das Feld, was passiert? Vielleicht besser eine fahne mit der Klasse des Elements?
    • Dein Punkt ist richtig, aber ich bin nicht besorgt über jemand eingeben text eingeben... " in der textbox. Ich mag den Nebeneffekt, dass es nicht erlaubt ist. 🙂
    InformationsquelleAutor andreialecu
  3. 5

    Ich bin mit dem Wasserzeichen-plugin für jQuery, aber meine situation war ähnlich:

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

    Verwendet es eine classname für die Anzeige des Wasserzeichens. (Ich bin mir nicht sicher, ob die DigitalBrush version verwendet eine Klasse ist oder nicht.) Ich habe geändert, die oben genannten Funktion zu verwenden die jQuery-hasClass () - Funktion, um zu bestimmen, ob oder nicht das Feld ausgewertet wird, als "leer", basierend auf den aktuell zugeordneten Klassen.

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

    Wenn unter Verwendung der einzigartigen Wasserzeichen Etiketten für jedes Ihrer testboxen (Zum Beispiel "geben Sie firstname', 'geben Sie Nachname'...), Sie verbessern könnte das Skript:

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

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

    Dies entfernt auch die hardcoded text aus dem Skript.

    InformationsquelleAutor Chris
  5. 0

    Nicht sicher, wie Sie die validation-plugin funktioniert, aber dies ist ein separates Modul, nutzbar ist.

       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 "";
   }
    InformationsquelleAutor Brett Weber
Schreibe einen Kommentar