0

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

我想要实现的是拥有一个涵盖任意数量 pageBlockSections 的功能 - 主要目标是检测模糊事件何时发生 - 然后将 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 回答