Peter Blum validators not firing inside of JQuery Steps wizard

225 views Asked by At

I am using JQuery Steps to set up a wizard in a WebForms project, and using Peter Blum's VAM validators to make sure the input is good. Here is an example of the first step in my process:

 <div id="wizard">
           <h1>Step 1</h1>
            <div id="stepToAccount">
                <p class="sectionHeader">
                    <asp:Label id="DropdownLabel" runat="server"/>
                </p>
                <asp:DropDownList id="Dropdown" CssClass="indent50" runat="server"/>

                <br/>
                <vam:RequiredListValidator runat="server" ID="DropdownIsRequired" Group="StepOne" ControlIDToEvaluate="Dropdown" UnassignedIndex="0" ErrorMessageLookupID="DropdownRequired.Error" SummaryErrorMessageLookupID="DropdownRequired.Error"/>

            </div>

All of this works 100% fine outside of the div I'm using to designate that I'm using to designate the wizard (<div id="wizard">), but fails to function properly inside the wizard div. Clicking off the dropdown will not cause it to immediately validate as expected, and if I manually call validation with window.DES_ValidateGroup("StepOne"), it will properly return that the step has problems (the step tile turns red), but it will not show the error message that goes along with the validators.

Drilling down on why this is, it seems the <span> tags that the VAM validators emit have an inline visibility tag that keeps them from being hidden, which VAM's javascript then removes and re-applies when it needs to (e.g., when a validator fails, and then when it succeeds again). The visibility tag is not being removed properly when validation fails inside the wizard div.

Does anyone have any clue as to why this might be, and how I could fix it?

EDIT: For reference, this is the emitted code:

 <div id="wizard">
            <h1>Step 1</h1>
            <div id="StepOne">
                <p class="sectionHeader">
                    <span id="DropdownLabel">Which account would you like to pay to?</span>
                </p>
                <select name="Dropdown" id="SelectToAccountDropdown" class="indent50">
<option selected="selected" value="0">-- Option One -- </option>
<option value="1">Option Two</option> 
</select>
       <span class="indent50">
                    <span style='visibility:hidden' class='VAMErrorText'  id='DropdownIsRequired'>
   <span id='DropdownIsRequired_Txt'>Please select a thing.</span>
</span>    
                </span>                    
            </div>
1

There are 1 answers

0
tmesser On BEST ANSWER

The problem was that JQuery Steps was stripping the event listeners out of the DOM during its render method, which was disabling the listeners that the Peter Blum validators were relying upon to do their work. Please see Kaish's answer in this question; replacing the JQuery Steps render() method with the one he used there fixed my issue.