Jquery 基于模糊起源的父相关验证-Visualforce&；页面块部分

SFDC/Visualforce生成了一些非常粗糙的标记。对于每个pageBlockSection，我希望有一个“validateMe”类。在每个pageBlockSection中都有各种必填字段，我认为我的选择器的目标是正确的

我试图实现的是一个覆盖任意数量PageBlockSection的函数——主要目标是检测何时发生模糊事件——然后使用“validateMe”类向上遍历DOM到section，然后向下遍历以检查是否也填充了其他必需字段（仅适用于该部分！）

复选框工作得很好

但是，输入文本字段没有-这里有帮助吗

小提琴-

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>

---

之后需要重新评估长度/尺寸

$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');
  }
});

$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');
  }
});