0

説明させてください：

テーブル フォームがあり、いくつかのフィールドが必須で、カスタム検証を作成しようとしています。

例：

<table>
   <tr>
     <td class="required">Description</td>
     <td>
        <input id="input1" />
      </td>
      <td>Phone</td>
      <td>
         <input id="input2" />
       </td>
    </tr>
    <tr>
       <td class="required">Location</td>
       <td> 
         <select id="select1"/>
       </td>
       <td>Email</td>
       <td>
          <input id="input3"/>
        </td>
    </tr>
  </table>

私がやりたいのは、クラスが必要なすべての要素を見つけることです。これは、次を使用して非常に簡単です。

var requiredElements = document.querySelectorAll(".required");

そして、最も近いコントロール要素を見つけて、その値が空かどうかを確認したいと思います。問題は、それが入力なのか選択なのかがわからないことです。私は .closest() 関数を使用することを考えていましたが、2 つの異なる入力が必須に等しく近い場合 (上記の例のように)、望ましくない結果につながる可能性があります。

どんな助けでも大歓迎です。

4

2 に答える 2

1

jQueryでは、いくつかのセレクターのいずれかを使用し、それを 1 つ以上の追加のセレクターと組み合わせることで、タイプに関係なくコントロールを選択できます。

提供するコード スニペットでは、選択するコントロール (input1およびselect1) は、「必須」クラスのセルの兄弟であるテーブル セル要素の子要素であるため、次のように選択を構築できます。

$(".required + td").child

次のように分類されます。

  1. 「必須」クラスが適用されている要素を見つけます。これにより、2 つのテーブル セルが得られます。

    <td class="required">Description</td>

    と

    <td class="required">Location</td>

  2. 1によって返される各要素に対して、次のテーブル セルを取得するには、「次の隣接」セレクター+を使用します。td

    <td><input id="input1" /></td>

    と

    <td><select id="select1" /></td>

  3. 2.によって返された各要素について、子要素を取得します。

    <input id="input1" />

    と

    <select id="select1" />

ターゲットでのアクションを示すjsFiddleもあります(境界線を濃い赤に変更)。

編集
これが機能するのは、スニペット内のレイアウトが、ターゲットにする要素を、選択基準を持つ要素に対して一貫して同じ位置に配置するためです。クラス/IDでマークされていない要素を見つける一貫した方法が必要です。そうしないと、目的を達成できません。

于 2013-02-28T15:09:06.290 に答える
0

Raadの回答は気に入っていますが、この回答を投稿して、問題を解決するために何をしたかを述べたいと思います。

まず、次のように、対応する入力の id と等しい値を持つすべてのラベル td に、カスタム属性 labelFor を追加しました。

<table>
   <tr>
     <td class="required" labelFor="input1">Description</td>
     <td>
        <input id="input1" />
      </td>
      <td labelFor="input2">Phone</td>
      <td>
         <input id="input2" />
       </td>
    </tr>
    <tr>
       <td class="required" labelFor="select1">Location</td>
       <td> 
         <select id="select1"/>
       </td>
       <td labelFor="input3">Email</td>
       <td>
          <input id="input3"/>
        </td>
    </tr>
  </table>

次に、次の検証関数を使用しました。

      function validateForm () {
                var self = this;
                var validationPassed = true;
                //First I will gather every .required element in an Array
                var requiredTags = document.querySelectorAll(".required"); 
                //Then I will loop through the array
                for (var i = 0; i < requiredTags.length; i++) {
//Get value of attribute "labelFor" which would be the controlId that this label refers to
                    var controlId = $(requiredTags[i]).attr("labelFor");
    //Then I use this to check if that control's value is empty.
                    if ($("#" + controlId).val() == ('' || null)) {
                        validationPassed = false;
                    }  
                }
                if (!validationPassed) {
                    alert("Please fill all the required fields");
                }
                return validationPassed; 
            }

このようにして、すべての必須フィールドが空ではないことを確認して true を返すか、false を返し、ユーザーに警告するアラートを返します。

Raad が Edit で説明した問題が、このアプローチがより有用である主な理由であることがわかりました。input 要素が label td 要素に対して常に同じ位置にある場合は、心配する必要はありません。

于 2013-03-01T10:47:57.640 に答える