jquery - Parent dependent validation based on blur origination - Visualforce & PageBlockSections -

jquery - Parent dependent validation based on blur origination - Visualforce & PageBlockSections -

sfdc / visualforce generates pretty gnarly markup. each pageblocksection want have class of "validateme". within each pageblocksection various required fields, think selector targeting correctly.

what i'm trying accomplish have 1 function cover number of pageblocksections - main goal observe when blur event happens - traverse dom section class of "validateme" , traverse downwards check if other required fields filled in (for section only!).

the checkboxes work great.

however, input text fields not - help here?

fiddle - 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>

sorry messy dom.

script

$('[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){ homecoming $(element).closest(selector).find('.statusflag').css('color', color).text(status); }

needed re-evaluate length / size afterwards....

$fields.blur(function () { if ($(this).parents('.validateme').find('.requiredinput input').filter(function (){ homecoming $.trim(this.value) === ''; }).length === 0) { setstatus(this, '.validateme','green','complete'); } else { setstatus(this, '.validateme','red','incomplete'); } });

http://jsfiddle.net/grqwp/23/

jquery dom jquery-selectors visualforce dom-traversal