基于模糊起源的父依赖验证 - Visualforce 和 PageBlockSections

Posted 2023-05-09

【中文标题】基于模糊起源的父依赖验证 - Visualforce 和 PageBlockSections

【英文标题】：Parent dependent validation based on blur origination - Visualforce & PageBlockSections

【发布时间】：2013-01-22 07:41:29

【问题描述】：

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

【参考方案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/