Question

SFDC / Visualforce生成一些非常粗糙的标记。对于每个pageBlockSection，我想要一个“validateMe”类。每个pageBlockSection里面都有各种必填字段，我认为我的选择器正确定位。

我想要实现的是拥有一个覆盖任意数量的pageBlockSections的函数 - 主要目标是检测模糊事件何时发生 - 然后将DOM遍历到具有“validateMe”类的部分并且然后遍历以检查是否还填写了其他必填字段（仅适用于该部分！）。

复选框效果很好。

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

小提琴 - http://jsfiddle.net/grQwP/20/

HTML Block

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

Answer 1

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

$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/

基于模糊起源的父依赖验证 - Visualforce＆amp; PageBlockSections

1 个答案: