Validation widget don't work in regions?

Question

Is it true, Validation Widget don't work in regions? If I
create a text validation widget, then wrap it in a region for xml
data, the validation no longer functions for the widget. Is there
something I'm missing here, or does it simply not work in that
configruation?
Thanks,
Nathan

Answer 1

Hi Nathan,
There is a workaround to have the validation widgets working
inside a spry:region.n
The reason why they don't work inside a region is because the
spry region removes anything from page when it is created. In this
way, the widget remains somewhere in the memory instantiated and
will search from an element that no longer exists.This will make
the widget to not function properly.
You should do the following to have the widgets working
inside a spry:region.
- add the widgets' constructors instantiation inside the
region
- make an extra check if the widgets already exist and
destroy them if any. I
Below is a code sample of what you should do:
<div spry:region="ds1">
<form id="form1" name="form1" method="post" action="">
<span id="sprytextfield1">
<input type="text" name="text1" id="text1" />
<span class="textfieldRequiredMsg">A value is
required.</span></span>
<p><span id="sprytextarea1">
<label>
<textarea name="textarea1" id="textarea1" cols="45"
rows="5"></textarea>
<span id="countsprytextarea1"> </span>
</label>
<span class="textareaRequiredMsg">A value is
required.</span><span
class="textareaMinCharsMsg">Minimum number of characters not
met.</span><span class="textareaMaxCharsMsg">Exceeded
maximum number of characters.</span></span></p>
<p>
<input type="submit" name="button" id="button"
value="Submit" />
</p>
</form>
<script type="text/javascript">
<!--
if (typeof sprytextfield1 != 'undefined' &&
sprytextfield1.destroy) sprytextfield1.destroy();
if (typeof sprytextfield1 != 'undefined' &&
sprytextfield1.destroy) sprytextfield1.destroy();
var sprytextfield1 = new
Spry.Widget.ValidationTextField("sprytextfield1");
var sprytextarea1 = new
Spry.Widget.ValidationTextarea("sprytextarea1",
{validateOn:["blur", "change"], counterType:"chars_count",
counterId:"countsprytextarea1", minChars:2, maxChars:12});
//-->
</script>
</div>
Hope this makes things more clear,
Diana