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

방법 필드에 대한 사용자 지정 유효성 검사 규칙을 구성하는 방법을 설명합니다.

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 2

덕분에, 나는 다음과 같은 솔루션을 함께했다 이것은 또한 스크립트에서 하드 코드 된 텍스트를 제거

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

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

: FIRSTNAME ',') ... '성을 입력, 당신은에 스크립트를 향상시킬 수 있습니다.

Answer 3

예를 들어 당신의 testboxes의 각 (고유 워터 마크 라벨을 사용하여 '입력 : (사람이 관심이 있다면) 링크로 날을 제공하는 카 자르에

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