0

SFDC / Visualforce はかなり危険なマークアップを生成します。pageBlockSection ごとに、「validateMe」のクラスが必要です。各 pageBlockSection 内にはさまざまな必須フィールドがあり、セレクターが正しくターゲットにしていると思います。

私が達成しようとしているのは、任意の数の pageBlockSections をカバーする 1 つの関数を用意することです。主な目標は、ぼかしイベントがいつ発生したかを検出することです。次に、DOM を「validateMe」のクラスを持つセクションまでトラバースしてからトラバースします。をクリックして、他の必須フィールドも入力されているかどうかを確認します (そのセクションのみ!)。

チェックボックスはうまく機能します。

ただし、入力テキスト フィールドはそうではありません。

フィドル - http://jsfiddle.net/grQwP/20/

HTML ブロック

<div id="first:test"> <span class="statusFlag" style="color:red">Incomplete</span>
  <br/>
  <input type="checkbox" value="Stuff">Box 1</input>
  <input type="checkbox" value="Stuff">Box 2</input>
  <input type="checkbox" value="Stuff">Box 3</input>
</div>
<div id="second:test"> <span class="statusFlag" style="color:red">Incomplete</span>
  <br/>
  <input type="checkbox" value="Stuff">Box 1</input>
  <input type="checkbox" value="Stuff">Box 2</input>
  <input type="checkbox" value="Stuff">Box 3</input>
</div>
<div id="noTest">
  <input type="checkbox" value="stuff">No Validate</input>
</div>

<div id="patientEnrollmentForm:theform:j_id71:patientInfoSection" class="validateMe">
  <div class="pbSubsection">
    <table class="detailList">
      <tbody>
        <tr>
          <td> <span id="patientEnrollmentForm:theform:j_id71:patientInfoSection:patientInfoStatus"
            style="color:red" class="statusFlag">Incomplete</span>
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <td>
                    <label class="labelColumn">Name</label>
                  </td>
                  <td>
                    <div class="requiredInput">
                      <div class="requiredBlock"></div>
                      <input maxlength="80" name="First_Name_gne" class="placeholder"
                      placeholder="First Name">
                    </div>
                  </td>
                  <td>
                    <div class="requiredInput">
                      <div class="requiredBlock"></div>
                      <input maxlength="80" name="Patient_Name_gne" class="placeholder"
                      placeholder="Last Name">
                    </div>
                  </td>
                  <td>
                    <input maxlength="1" name="Mid_Initial_gne" class="placeholder" placeholder="Mid. Initial">
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<div id="patientEnrollmentForm:theform:j_id71:secondSection" class="validateMe">
  <div class="pbSubsection">
    <table class="detailList">
      <tbody>
        <tr>
          <td> <span id="patientEnrollmentForm:theform:j_id71:patientInfoSection:secondSection"
            style="color:red" class="statusFlag">Incomplete</span>
          </td>
        </tr>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <td>
                    <label class="labelColumn">Name</label>
                  </td>
                  <td>
                    <div class="requiredInput">
                      <div class="requiredBlock"></div>
                      <input maxlength="80" name="First_Name_gne" class="placeholder"
                      placeholder="First Name">
                    </div>
                  </td>
                  <td>
                    <div class="requiredInput">
                      <div class="requiredBlock"></div>
                      <input maxlength="80" name="Patient_Name_gne" class="placeholder"
                      placeholder="Last Name">
                    </div>
                  </td>
                  <td>
                    <input maxlength="1" name="Mid_Initial_gne" class="placeholder" placeholder="Mid. Initial">
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

乱雑な DOM で申し訳ありません。

脚本

$('[id$=test] input:checkbox').change(function () {
    if ($(this).parent().children('input:checkbox').filter(':checked').length > 0) {
    setStatus(this,'[id$=test]','green','Complete');
  } else {
    setStatus(this,'[id$=test]','red','Incomplete');
  }
});

var $fields = $('.validateMe .requiredInput :input');

$fields.blur(function () {
  if ($(this).parents('.validateMe').find('.requiredInput :input').filter(function() {return $.trim(this.value) !== "";})) {
    setStatus(this, '.validateMe','green','Complete');
  } else {
    setStatus(this, '.validateMe','red','Incomplete');
  }
});

function setStatus(element, selector, color, status){
  return $(element).closest(selector).find('.statusFlag').css('color', color).text(status);
}
4

1 に答える 1

0

後で長さ/サイズを再評価する必要がありました....

$fields.blur(function () {
  if ($(this).parents('.validateMe').find('.requiredInput input').filter(function (){
       return $.trim(this.value) === '';
     }).length === 0) {
    setStatus(this, '.validateMe','green','Complete');
  } else {
    setStatus(this, '.validateMe','red','Incomplete');
  }
});

http://jsfiddle.net/grQwP/23/

于 2013-02-06T23:07:51.387 に答える