一度にフォームフィールドをターゲットにする

Question

長い話が短いので、いくつかのフォーム（2）があります。さまざまなタイプのバリデーションが必要です。引数のために、チェックしたいと言うことができますすべてのフォームフィールドの ""空値または値に対して ""使用します。私は何を意味するか

私はそれらのすべてのコードを記述せずに同じ 時に、これらの3つのフィールドで空になるかどうかを確認することができますどのように例えば3つのフィールドを、持っている場合...

さ...例えば：

HERESにいくつかのサンプルコード：

JS：

var test = document.getElementById("loginUsername");//this is the username field// 

test.onfocus = removeVal; 
test.onblur = inserDefVal; 

function removeVal(){ 
    if(test.value == "Enter your Username"){ 
     test.value = "";  
    } 
} 


function inserDefVal(){ 
    if(test.value == ""){ 
     test.value = "Enter your Username"; 
    } 
} 

今場合、私は、フィールドの値をチェックするために、これら2つの機能を有するが

... 3つのフィールド、idは今私が空になるかどうかを確認するフォーム内の他のすべてのフィールドを想像

test.onfocus = removeVal; 
test.onblur = inserDefVal; 

test2.onfocus = removeVal; 
test2.onblur = inserDefVal; 

test2.onfocus = removeVal; 
test2.onblur = inserDefVal; 

のリストを持っている必要がありますを意味します...病気が笑SUPER長いリストを持ってい

ので、私のquesitonは、多分、1 ... およびまたは多分

一般的な機能/または

のようなものを言うアクション（私が意味するロジック） のように、これらすべてを置くためにそこ方法ですここに擬似コードが来る -

if(this.value =="") do xyz .... "と"は、このフィールドが重なっています。

私はあまりにも混乱イムないと思い

かと言えば、私は、例をsomehow..forアレイ内のすべてのボタン名/変数名を入れて、その呼ばれるArraOfButtonsを言っていたし、その後

ArrayOfButtons.onmouseover/out = function..... 

...私はちょうど空のためにチェックするためにそれらのtest1/2/3を持っている場合あなたが上に見ることができるので、より良い、より速いクリーナーコードを書く方法を探しています、そして、日付と他の値をチェックする想像して....ページはSUPERロングになります。要するに

は、イムではなく1回の書き込みで、CSSの速記のようなちょっとの事どこを探して

margin-top:10px/margin-bottom:10px/margin-left/right:10px 

1だけだろう

マージン：10pxの;

ヒント/リンク/情報私は喜んで感謝しています。

ありがとうございました。あなたはjQueryのを使用している場合

Answer 1

<input class="hint" type="text" name="username" value="Enter your Username" data-hint="Enter your Username" /> 
<input class="hint" type="text" name="email" value="Enter your Email" data-hint="Enter your Email" /> 
<input class="hint" type="text" name="city" value="Enter your City" data-hint="Enter your City" /> 

<script type="text/javascript"> 

    // handler for form elements when they receive onfocus 
    function removeVal() { 
     // get default value from attribute 'data-hint' and compare the current value 
     if (this.value == this.getAttribute('data-hint')) { 
      // if current value equal default value, set value to empty 
      this.value = ""; 
     } 
    } 

    // handler for form elements when they receive onblur 
    function inserDefVal() { 
     // if current value equal empty 
     if (this.value == "") { 
      // get default value from attribute and set her to field value. 
      // if attribute not found to set empty 
      this.value = this.getAttribute('data-hint') || ""; 
     } 
    } 

    // search elements by className 
    function addEvents(className) { 

     var i, j, elem, all, elems = []; 

     // If your browser supports "getElementsByClassName", use it 
     if (document.getElementsByClassName) { 
      // search elements by class name 
      elems = document.getElementsByClassName(className); 
     } else { 
      // search elements by class name for IE7-8. 
      // IE7-8 not support native "getElementsByClassName" 
      all = document.getElementsByTagName("*"); 
      // pass on all the elements 
      for(j = 0; elem = all[ j++ ];) { 
       // check for the presence of our class name 
       if ((" " + elem.className + " ").indexOf(" " + className + " ") >= 0) { 
        // is found the className, put an item in the stack 
        elems[ elems.length ] = elem; 
       } 
      } 
     } 

     // hang on found items the events 
     for(i = 0; elem = elems[ i++ ];) { 
      elem.onfocus = removeVal; 
      elem.onblur = inserDefVal; 
     } 
    } 

    // initialize elements by className "hint" 
    addEvents('hint'); 

</script> 

Answer 2

、あなたはフィールドクラスのすべてを与えると、そのような

$('.inputClass') 

として、あるいはこれは、あなたがすべてに対してアクションを実行できるようになります

$('input') 

要素を介してそれらにアクセスすることができます一致する要素。あなたのページにすべての単一のフォームフィールドを反復処理するには

Answer 3

、あなたはまた、入力の特定のタイプまたは任意のクラスあなたに基づいて、そのループ内でフィルタリングすることができ

var formFields = document.getElementsByTagName('input'); 
for (var i=0; i < formFields.length; i++) { 
    var field = formFields[i]; 
    field.onfocus = removeVal; 
    field.onblur = inserDefVal; 
} 

ような何かを行うことができます入力に割り当てられている可能性があります。